iFrame integration
  • 18 Jan 2024

iFrame integration


The content is currently unavailable in German. You are viewing the default English version.
Artikel-Zusammenfassung

# 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>
 


War dieser Artikel hilfreich?

What's Next