Skip to content

Den Lecturio-Player auf Webseiten einbetten

In diesem Tutorial erfahren Sie, wie Sie den Lecturio-Player auf Ihrer Website einbinden können. Detailierte technische Informationen finden Sie in unserer API-Dokumentation.

Video auswählen und Code erzeugen

Screenshot: Einbetten-Button Bevor Sie ein Video von Lecturio auf Ihrer Seite einbinden können, müssen Sie einen sogenannten „Einbettungscode“ erzeugen. Doch keine Angst, dies ist denkbar einfach:

Navigieren Sie zur Übersichtsseite des Vortrags Ihrer Wahl und klicken Sie rechts unter dem Lecturio-Player auf den „Einbetten“ Button. Beachten Sie, dass der Button nicht bei allen Vorträgen erscheint.

Screenshot: Einbettungscode generieren Sie gelangen zu der Seite „Diesen Vortrag in eine Webseite einbetten“. In dem Formular „Einbettungscode erstellen“ können Sie genauere Angaben zur Verwendung des Lecturio-Players machen. (Sie können jedoch auch einfach auf den Button „Code generieren“ klicken – der Lecturio-Player verwendet in diesem Fall Standardwerte)

  • Die Angabe der URL Ihrer Webseite kann unter Umständen sehr wichtig für Sie sein. Sollte ein Nutzer Ihre Seite über den Player verlassen – beispielsweise, wenn er den eingebetteten Vortrag kaufen möchte – kann er nur dann korrekt zurückgeleitet werden, wenn Sie Ihre URL entsprechend angeben. (Beachten Sie, dass die Angabe der URL für die JavaScript-Version nicht nötig ist.)
  • Sollten Sie wünschen, dass der Lecturio-Player auf Ihrer Webseite in einer bestimmten Breite angezeigt werden soll, dann geben Sie diese hier an (erlaubt sind Angaben in Pixeln). Die optimale Höhe wird von uns berechnet, ließe sich aber auch später anpassen.
  • Falls Sie am Lecturio-Partnerprogramm teilnehmen, können Sie hier ihren Partner-Code angeben. Sie erhalten dann Provision für über Ihre Seite verkaufte Vorträge. Sollten Sie bereits mit Ihrem Partnerkonto angemeldet sein, füllen wir dieses Feld automatisch für Sie aus. (Tutorial: Wie sie am Lecturio-Partnerprogramm teilnehmen können.)
  • Sie haben außerdem die Möglichkeit das Layout des Players zu definieren. Standardmäßig wählt der Lecturio-Player das Layout automatisch je nach Größe. Sie können jedoch auch manuell bestimmen, welches der drei Layouts sie verwenden wollen.

Klicken Sie auf den Button „Code generieren“ sobald Sie bereit sind.

In dem sich öffnenden Fenster werden Ihnen zwei verschiedene Möglichkeiten des Einbindens geboten: mittels JavaScript oder Iframe. Welche der beiden Lösungen für Sie am geeignetsten ist, entnehmen Sie einfach unserer technischen Dokumentation für unsere JavaScript SDK oder die Iframe-Version.

Markieren Sie den Code Ihrer Wahl (achten Sie darauf, dass Sie den Code vollständig markieren) und kopieren Sie ihn in die Zwischenablage (unter Windows Strg+C oder Rechtsklick und dann „kopieren“).

Hinweis: Die JavaScript-Version besteht aus zwei Teilen. Der Platzhalter wird beim Aufruf Ihrer Seite durch den Lecturio-Player ersetzt. Die JavaScript-Funktion wird benötigt, damit das Laden des Players überhaupt funktioniert und darf nur einmalig in Ihre Seite eingebunden werden. Genauere Informationen finden Sie in der entsprechenden technischen Dokumentation.

Code in die eigene Webseite einbinden

Befindet Sich der Code in Ihrer Zwischenablage, müssen Sie ihn nur noch in Ihre Webseite integrieren. Fügen Sie ihn einfach an der Stelle ein, an der später der Lecturio-Player erscheinen soll.

Beispiel für die Iframe-Version:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Meine Seite</title>
</head>
<body>
  <h1>Seitenüberschrift</h1>
  <p>Direkt nach diesem Absatz folgt der eingebettete Lecturio-Player:</p>
  <div id="container-lecturio-player">
        <strong>Enzyme und Enzymkinetik</strong><br />
    <iframe
      src="http://www.lecturio.de/de/l/ap/64293e2ec5de400e01f9cd3862674354?url=www.meine-website.de&w=400&h=336&pl=smallLayout"
      scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:336px;" allowTransparency="true">
    </iframe>
  </div>
  <p>Ein Absatz der später unterhalb des Players erscheinen wird.</p>
</body>
</html>

Beispiel für die JavaScript-Version:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Meine Seite</title>
</head>
<body>
  <h1>Seitenüberschrift</h1>
  <p>Direkt nach diesem Absatz folgt der eingebettete Lecturio-Player:</p>
  <div id="container-lecturio-player">
        <div id="lec-root"></div>
    <script type="text/javascript">
      (function() {
        var e = document.createElement('script');
        e.type = "text/javascript";
        e.src = "http://www.lecturio.de/js/lec-sdk.js";
        document.getElementById("lec-root").appendChild(e)
      }());
    </script>
    <a href="http://www.lecturio.de/vortrag/enzyme-und-enzymkinetik"
    rel="lec:player" rev="key:64293e2ec5de400e01f9cd3862674354,w:400,pl:smallLayout">Enzyme und Enzymkinetik</a>
    
  </div>
  <p>Ein Absatz der später unterhalb des Players erscheinen wird.</p>
</body>
</html>

Bitte beachten Sie, dass sie den ersten Teil des JavaScript Codes nur einmalig auf Ihrer Webseite einbinden. Detailierte technische Informationen finden Sie in unserer JavaScript SDK Dokumentation.