Contents x
    Embed a Webcast in another page
    • 19 Jan 2024
    • Print
    Contents

    Embed a Webcast in another page

    • Updated on 19 Jan 2024
    • Print
    Article summary

    <html>
  <head>
    <title>Webcast - iframe Embedding Sample Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i" rel="stylesheet" />
    <link href="https://meyerweb.com/eric/tools/css/reset/reset.css/reset.css" rel="stylesheet" />
    <link rel="shortcut icon" href="https://www.movingimage.com/wp-content/uploads/sites/2/2017/11/cropped-movingimage_favicon-2-192x192.png" />
    <style>
      body {
        font-family: "Source Sans Pro";
      }
      #header {
        /* this header is just an example, your CMS may introduce it's own header. The important thing is to know the height of the header */
        background-image: url('https://webcast.movingimage.com/csr/img/system-info-icon.png');
        background-repeat: no-repeat;
        background-color: #f5f5f5;
        border-bottom: 1px solid #009339;
        height: 60px; /* this value is important */
      }
      .wbc-iframe-container {
          display: flex; /* essential, works with iframe selector to centre content in the page */
          height: calc(100vh - 61px); /* sets the container height to the viewport less the main page header height and a tiny bit of margin */
      }
      .wbc-iframe-container iframe {
          border-left: 1px solid #f5f5f5;
          border-right: 1px solid #f5f5f5;
          box-shadow: 0 2px 20px 0 rgba(0,0,0,.12),0 0 4px 0 rgba(0,0,0,.05);
          margin: auto; /* essential, works with the container selector to centre content in the page */
          width: 80%; /* sets the width of the iframe and therefore its content, the Webcast */
      }
    </style>
  </head>
  <body>
    <div id="header">
    </div>
    <div class="wbc-iframe-container">
      <!-- paste the iframe embed code from the Webcast > Languages tab below here -->
      <iframe id="wbc-iframe" title="Webcast - iframe Integration Example" src="https://webcast.movingimage.com/csr/#/webcast/5c8a630fe5b9df00125712c5/en" allowfullscreen="true" allow="fullscreen"></iframe>
      <!-- paste the iframe embed code from the Webcast > Languages tab above here -->
    </div>
  </body>
</html>

    We do not recommend embedding multiple Webcasts into a single page.

    Was this article helpful?
    What's Next