Inhalt x
    iFrame Integration
    • 25 Apr 2025
    • Drucken
    Inhalt

    iFrame Integration

    • Aktualisiert am 25 Apr 2025
    • Drucken
    Artikel-Zusammenfassung

    # CorporateTube Iframe Integration

    Übersicht

    Mit Hilfe von einfachem JavaScript und zwei JavaScript-Client-Bibliotheken können Sie CorporateTube-Inhalte als gekapselten Inline-Frame (iFrame) in eine bestehende Seite integrieren.

    Die iFrame-Integration ist für öffentlich verfügbare Videos in CorporateTube gedacht. Sie funktioniert nicht für private CorporateTube-Konten, die eine Authentifizierung erfordern.

    Integration

    1. Erstellen Sie ein  <div> Element auf der übergeordneten Seite, in das der iFrame eingefügt werden soll.

      Dem <div> muss eine  id zugewiesen werden („ct-frame-wrapper“ im folgenden Beispiel).

    2. Sie benötigen die JavaScript-Client-Bibliotheken embed.js and iframeSizer.min.js. Sie können sie von movingimage EVP hier herunterladen:
      embed.js
      iframeSizer.min.js

    3. Laden Sie beide Bibliotheken und ein benutzerdefiniertes JavaScript-Snippet in den <head>-Abschnitt der übergeordneten Seite. Siehe das Beispiel unten auf der Seite.

    Konfigurationsoptionen

    Option

    Beschreibung

    Standardwert

    ctUrl

    CorporateTube URL, die für die Integration verwendet werden soll

    window.location.origin

    wrapperId

    id, die in dem div-Element verwendet wird, das den iframe enthält

    ct-frame-wrapper

    basePath

    Relativer Pfad des übergeordneten Frames, in den der iframe gerendert wird

    "" (leerer string)

    Beispiel

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