---
title: "iFrame integration"
slug: "iframe-integration"
updated: 2024-01-18T14:55:29Z
published: 2024-01-18T14:55:29Z
canonical: "help.movingimage.com/iframe-integration"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.movingimage.com/llms.txt
> Use this file to discover all available pages before exploring further.

# iFrame integration

# 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 `&lt;div&gt;` element on the parent page into which the iframe will be placed.

> [!WARNING]
> The `&lt;div&gt;` needs to be given an `id` ("ct-frame-wrapper" in the below [example](/v1/docs/iframe-integration#example)).
2. Obtain the JavaScript client libraries `embed.js` and `iframeSizer.min.js`. You can download them from movingimage EVP here: [embed.js](https://movingimage-website-external.corporate.tube/iframe/embed.js) [iframeSizer.min.js](https://movingimage-website-external.corporate.tube/iframe/iframeResizer.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

```plaintext
 <!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>
```
