Contents x
    iFrame integration
    • 18 Jan 2024
    • Print
    Contents

    iFrame integration

    • Updated on 18 Jan 2024
    • Print
    Article summary

    # CorporateTube Iframe Integration

    Overview

    You can integrate CorporateTube content into an existing page as an encapsulated inline frame (iframe) with the help of some simple JavaScript and two JavaScript client libraries.

    The iFrame integration is intended for publicly available videos in CorporateTube. It will not work for private CorporateTube accounts that require authentication.

    Integration

    1. Create a <div> element on the parent page into which the iframe will be placed.

      The <div> needs to be given an id ("ct-frame-wrapper" in the below example).

    2. Obtain the JavaScript client libraries embed.js and iframeSizer.min.js. You can download them from movingimage EVP here:
      embed.js
      iframeSizer.min.js

    3. Load both libraries and a custom snippet of JavaScript in the <head> section of the parent page. See the example at the bottom of the page.

    Configuration options

    Option

    Description

    Default value

    ctUrl

    CorporateTube URL to be used for integration

    window.location.origin

    wrapperId

    id used in the div element which will hold the iframe

    ct-frame-wrapper

    basePath

    Relative path of the parent frame into which the iframe will be rendered

    "" (empty string)

    Example

     <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Iframe integration example</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <link type="text/css" rel="stylesheet" href="./style.css" />
    <script src="./embed.js"></script>
    <script src="./iframeResizer.min.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
       // Define the URL of the Corporate Tube to integrate
       var ctUrl = 'https://example.corporate.tube';

       // Define the path (after the domain in the URL) where the iframe will be shown 
       var basePath = '/videos'; 

       // Define the Id of the wrapper element in which the iframe will be added
       var wrapperId = 'ct-frame-wrapper';

       // Init the integration
       var ctEmbedded = new CtEmbedded(
          {
            basePath: basePath,
            wrapperId: wrapperId,
          },
          ctUrl
        );
      });
    </script>
   <style>#ct-frame-wrapper > iframe { width: 100%; }</style>
  </head>

  <body>
    <div id="ct-frame-wrapper"></div>
  </body>
</html>

    Was this article helpful?
    What's Next