Skip to Content
Videoplayer (Embed)Einrichtung

Der Ignite-Video-Embed-Player

Neben der Nutzung unserer umfangreichen API, um deinen eigenen Videoplayer zu bauen, ist die gängigste Art, Videos von Ignite einzubinden, unseren einbettbaren iFrame-Videoplayer zu verwenden.

1. Player-iFrame-URL

Du kannst entweder das HTML-iFrame-Snippet aus deiner Ignite-Admin-Oberfläche kopieren und einfügen oder die iFrame-URL selbst erstellen – nach einer einfachen Logik. Zuerst musst du deine Basis-Embed-URL zusammenbauen.

Deine Basis-URL:

https://[YOUR-IGNITE-DOMAIN]/player/index.html?id=[VIDEO-ID]

Beispiel:

https://play.ignite.video/player/index.html?id=6703e05251543798059613b3

2. Player konfigurieren

Du kannst das Verhalten und die Darstellung des Players steuern, indem du der Embed-URL Abfrageparameter hinzufügst.

Alle Parameter sind optional und haben sinnvolle Standardwerte. Du kannst mehrere Parameter kombinieren, indem du sie in deiner URL mit & trennst:

?id=[VIDEO-ID]&autoplay=true&muted=true&colorPrimary=FF5500

Die verfügbaren Optionen sind in folgende Kategorien gegliedert:

  • Wiedergabe — Steuere, wie das Video abgespielt wird (autoplay, loop, muted, limitQuality)
  • Steuerung — Konfiguriere die Player-Oberfläche (controls, fullscreen, pip, airPlay, googleCast)
  • Untertitel und Sprache — Einstellungen zu Untertiteln und Lokalisierung (initCaptions, showTranscription, lang)
  • Erscheinungsbild — Passe Look & Feel an (fit, uiRadius, uiPadding, colorPrimary, colorSecondary, colorBackground)

controls

  • Typ: boolean
  • Standard: true

Steuerleiste ein- oder ausblenden.

loop

  • Typ: boolean
  • Standard: false

Video in einer Schleife abspielen. Wenn aktiviert, startet das Video nach dem Ende automatisch von vorn.

muted

  • Typ: boolean
  • Standard: false

Video stumm starten. Das ist oft in Kombination mit autoplay nötig, wegen der Autoplay-Richtlinien der Browser.

autoplay

  • Typ: boolean
  • Standard: false

Video automatisch starten, sobald der Player geladen ist. Die meisten Browser verlangen für Autoplay, dass das Video muted ist.

fit

  • Typ: string
  • Standard: contain
  • Werte: contain, cover

Legt fest, wie das Video in den Player-Rahmen passt.

  • contain — Das Video wird so skaliert, dass es in den Player passt und das Seitenverhältnis erhalten bleibt. Kann zu Letterboxing führen.
  • cover — Das Video wird so skaliert, dass der gesamte Player-Bereich bedeckt wird und das Seitenverhältnis erhalten bleibt. Kann zu Beschnitt führen.

initCaptions

  • Typ: boolean
  • Standard: false

Wenn aktiviert, sind die Untertitel beim Laden des Players standardmäßig sichtbar.

showTranscription

  • Typ: boolean
  • Standard: false

Zeigt in der Steuerleiste eine Schaltfläche für das Transkript, damit Nutzer das Video-Transkript einsehen können.

uiRadius

  • Typ: number
  • Standard: 10

Eckenradius (in Pixeln) der Player-Steuerelemente. Auf 0 setzen für scharfe Ecken.

uiPadding

  • Typ: number
  • Standard: 12

Abstand (in Pixeln) zwischen den Player-Steuerelementen und den Rändern des Players.

colorPrimary

  • Typ: string (hex oder rgba)
  • Standard: D90B5A

Akzentfarbe für UI-Elemente. Wird für aktive Zustände, Fortschrittsbalken und interaktive Elemente genutzt. Hex-Werte ohne #-Präfix angeben oder das Format rgba() verwenden.

colorSecondary

  • Typ: string (hex oder rgba)
  • Standard: FFFFFF

Grundfarbe für UI-Elemente. Wird für Symbole und Text in der Steuerleiste genutzt.

colorBackground

  • Typ: string (hex oder rgba)
  • Standard: 000000

Hintergrundfarbe für UI-Elemente. Unterstützt Transparenz über das Format rgba() (z. B. rgba(0,0,0,0.25)).

fullscreen

  • Typ: boolean
  • Standard: true

Erlaubt Vollbildwiedergabe des Videos. Wenn deaktiviert, wird die Vollbild-Schaltfläche ausgeblendet.

pip

  • Typ: boolean
  • Standard: false

Erlaubt Picture-in-Picture. Wenn aktiviert, können Nutzer das Video in ein schwebendes Fenster lösen.

airPlay

  • Typ: boolean
  • Standard: false

Erlaubt das Streamen des Videos per AirPlay (Apple-Geräte).

googleCast

  • Typ: boolean
  • Standard: false

Erlaubt das Streamen des Videos per Google Cast (Chromecast).

lang

  • Typ: string
  • Standard: Browsereinstellung

Erzwingt die Sprache der Oberfläche und die Standard-Untertitelsprache. Verwende übliche Locale-Codes (z. B. en-US, de-DE, fr-FR).

limitQuality

  • Typ: string
  • Standard: 1080p
  • Werte: 2160p, 1080p, 720p, 540p, 360p, 240p

Begrenzt die maximal gestreamte Qualität des Videos. Hilfreich für Bandbreitenmanagement oder wenn du die Qualitätsoptionen für bestimmte Anwendungsfälle einschränken willst.

Beispiel-Abfrageparameter:

&controls=true&loop=true&muted=true&autoplay=true&fit=cover&fullscreen=false&colorPrimary=00FF00&colorSecondary=FFFFFF&colorBackground=rgba(0,0,0,0.25)&uiRadius=0&uiPadding=0

3. Das iFrame anlegen

Lege in deinem HTML ein iframe-Element an und setze das Attribut src auf die URL, die du im vorherigen Schritt erstellt hast. Wichtig ist, einige Styling-Attribute zu setzen, damit der Player so aussieht und sich so verhält, wie du es möchtest.

<iframe 
  id="ignite-video-player" 
  src="https://play.ignite.video/player/index.html?id=6703e05251543798059613b3&controls=true&loop=true&muted=true&autoplay=true&fit=cover&fullscreen=false&colorPrimary=00FF00&colorSecondary=FFFFFF&colorBackground=rgba(0,0,0,0.25)&uiRadius=0&uiPadding=0" 
  width="640" 
  height="360" 
  frameborder="0"  
  style="width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto;"
></iframe>

Live-Beispiel

Hier siehst du ein Live-Beispiel des Players:

EinführungPlayer-API