Videos einbetten

Was bedeutet „Einbetten“?

Einbetten heißt: Sie fügen ein kleines Code-Schnipsel in Ihre Seite ein, und an dieser Stelle erscheint Ihr Video-Player. Das Video selbst bleibt sicher bei uns gehostet — Sie verlinken es nur.

Sie müssen nichts programmieren. Sie kopieren den fertigen Code aus der App und fügen ihn dort ein, wo das Video erscheinen soll.

Wo finde ich den Embed-Code?

1. 1

   Öffnen Sie in der App die gewünschte Library und klicken Sie auf das Video.

2. 2

   Scrollen Sie auf der Video-Detailseite zum Bereich „Embed-Code“.

3. 3

   Dort finden Sie zwei Varianten zum Kopieren: einen iFrame-Code und einen Player-Code.

iFrame oder Player-Code?

Beide zeigen denselben Player. Der Unterschied liegt darin, wie das Video in Ihre Seite eingebunden wird:

Live-Demo

Links sehen Sie einen echten, eingebetteten Player. Rechts steht exakt der Code, der ihn erzeugt — so sehen Sie sofort, was Sie erwartet.

In Ihr System einfügen

Fügen Sie den kopierten Code überall dort ein, wo Ihr Editor eigenen HTML- oder Embed-Code erlaubt. Suchen Sie nach einem Block mit einem dieser Namen:

• Ein „HTML“-, „Code“- oder „Embed“-Element (z. B. in WordPress, Webflow, Shopify, TYPO3).
• Eine Ansicht „Quellcode“ / „Code-Ansicht“ im Rich-Text-Editor (oft ein „</>“-Symbol).
• Ein dediziertes Feld für „Custom HTML“ oder „Eingebetteter Inhalt“.

Responsive Darstellung

Damit das Video auf allen Bildschirmgrößen das richtige Seitenverhältnis behält, können Sie den iFrame in einen Wrapper packen. Ersetzen Sie YOUR_EMBED_URL durch die URL aus Ihrem iFrame-Code:

<div style="position:relative;width:100%;aspect-ratio:16/9;">
  <iframe src="YOUR_EMBED_URL" loading="lazy"
    style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
    allow="autoplay;fullscreen;picture-in-picture"
    allowfullscreen></iframe>
</div>

Wiedergabe steuern (Autoplay, Ton aus, Schleife)

Sie können das Verhalten pro Einbettung steuern, indem Sie Parameter an die Embed-URL anhängen: autoplay, muted, loop und controls (jeweils 1 = an, 0 = aus) sowie t für die Startposition in Sekunden (z. B. t=30) und cc für Untertitel (z. B. cc=de schaltet die deutschen Untertitel beim Start ein, cc=off lässt alle aus). Alle Möglichkeiten live: /docs/showcase. Nur die von Ihnen gesetzten Parameter überschreiben die im Player gespeicherten Einstellungen. Das folgende Beispiel startet das Video automatisch, stumm, in Endlosschleife und ohne Bedienelemente – ideal für ein Hintergrundvideo:

<div style="position:relative;width:100%;aspect-ratio:16/9;">
  <iframe src="YOUR_EMBED_URL?autoplay=1&loop=1&controls=0" loading="lazy"
    style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
    allow="autoplay;fullscreen;picture-in-picture"
    allowfullscreen></iframe>
</div>

Hinweis: Browser erlauben Autoplay nur bei stummgeschalteten Videos, daher wird muted automatisch mitgesetzt – außer Sie setzen ausdrücklich muted=0. Dann versucht der Player, mit Ton zu starten. Direkt beim Laden der Seite, also ohne vorherigen Klick, lassen Browser das meist nicht zu: Das Video startet dann stumm und zeigt die Schaltfläche „Ton einschalten“. Mit einem Klick zuvor (z. B. in einer Lightbox, siehe unten) startet es sofort mit Ton. Der iFrame benötigt außerdem das Attribut allow="autoplay", sonst wird die automatische Wiedergabe blockiert.

Video in einer Lightbox (ein Klick mit Ton)

Öffnet sich das Video per Klick in einer Lightbox, soll es sofort mit Ton starten. Hängen Sie dafür autoplay=1&muted=0 an die Embed-URL und erzeugen Sie den iFrame erst beim Klick. Der Klick der Besucherin oder des Besuchers erlaubt dem Browser dann die Wiedergabe mit Ton:

<button id="open-video">Video ansehen</button>
<div id="video-lightbox" hidden
  style="position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;">
  <div id="video-box" style="position:relative;width:90vw;max-width:960px;aspect-ratio:16/9;"></div>
</div>
<script>
  const lightbox = document.getElementById('video-lightbox');
  const box = document.getElementById('video-box');
  document.getElementById('open-video').addEventListener('click', () => {
    box.innerHTML = '<iframe src="YOUR_EMBED_URL?autoplay=1&muted=0"'
      + ' style="position:absolute;inset:0;width:100%;height:100%;border:0;"'
      + ' allow="autoplay;fullscreen;picture-in-picture" allowfullscreen></iframe>';
    lightbox.hidden = false;
  });
  lightbox.addEventListener('click', (e) => {
    if (e.target !== lightbox) return;
    // Only hiding the iframe? Pause it instead of removing it:
    // box.querySelector('iframe').contentWindow.postMessage(
    //   { type: 'videooptimizer:command', command: 'pause' }, '*');
    box.innerHTML = '';
    lightbox.hidden = true;
  });
</script>

Lässt ein Browser den Ton trotzdem nicht zu (z. B. Safari auf iPhone/iPad), startet das Video stumm und zeigt die Schaltfläche „Ton einschalten“ – ein weiterer Tipp genügt. Das Attribut allow="autoplay" am iFrame ist Pflicht. Blendet Ihre Lightbox den iFrame beim Schließen nur aus, pausieren Sie das Video per postMessage-Befehl (play, pause, mute, unmute), wie im Kommentar gezeigt.