Integration & Auslieferung

Sofort abspielbar, ohne Plugin.

Die Videoanleitung läuft im Browser. Du bettest sie per iframe ein und steuerst Sprache, Audio und Branding über URL-Parameter. Kein Plugin, kein Download, keine Installation.

Embed klären Enhanced Production kennenlernen

Wo die Videoanleitung läuft

Webseite Per iframe in jede Content-Page einbettbar
Web-App Vollflächig in Self-Service-Portal oder Kundenbereich
LMS Direkt-Launch über cmi5-Standard
Browser Kein Plugin, keine App, kein Download

Code-Snippets

Embed-Vorlagen zum Kopieren

Drei typische Szenarien, drei Snippets. Ersetze den Host-Pfad durch dein Asset-Hosting, hänge bei Bedarf URL-Parameter an (siehe Sektion 02) und du bist online.

embed.html html

<div style="position: relative; width: 100%; aspect-ratio: 16 / 9;">
  <iframe
    src="https://cdn.kunde.example/yntro-player/?yp-lang=de-DE"
    style="position: absolute; inset: 0; width: 100%; height: 100%; border: 0;"
    title="yntro.video Anleitung"
    allow="autoplay; fullscreen; picture-in-picture; encrypted-media"
    allowfullscreen
    loading="lazy"
    referrerpolicy="strict-origin-when-cross-origin">
  </iframe>
</div>

Schrumpft mit dem Container. Funktioniert auf Mobile und Desktop ohne zusätzliche CSS-Tricks.

embed.html html

<div style="width: 100vw; height: 100vh; overflow: hidden;">
  <iframe
    src="https://app.kunde.example/yntro-player/?yp-lang=de-DE&yp-audio=main"
    style="width: 100%; height: 100%; border: 0; display: block;"
    title="yntro.video"
    allow="autoplay; fullscreen; picture-in-picture; encrypted-media; clipboard-read; clipboard-write"
    allowfullscreen>
  </iframe>
</div>

Für Self-Service-Portale und Kundenbereiche, in denen der Player den ganzen Bildschirm füllt.

url

https://aus.kunde.example/yntro-player/index.html

Im LMS-Course-Manifest hinterlegen. Das LMS hängt die cmi5-Parameter beim Launch selbst an (siehe Sektion 02).

Allow-Attribute für den iframe

Attribut	Status	Wofür
`allow="fullscreen"`	Pflicht	Vollbild-Button und Taste F
`allow="autoplay"`	Empfohlen	Browser-Autoplay-Policies
`allow="encrypted-media"`	Empfohlen	Heute kein DRM, zukunftssicher
`allow="picture-in-picture"`	Optional	PiP-Modus im Browser
`referrerpolicy="strict-origin-when-cross-origin"`	Empfohlen	DSGVO-freundliche Referrer-Weitergabe

Sprache, Audio, cmi5

Was du über URL-Parameter steuerst

Player-Parameter

Parameter	Beispiel	Wirkung
`yp-lang`	`?yp-lang=de-DE`	UI- und Untertitel-Sprache erzwingen
`yp-audio`	`?yp-audio=alternative`	Audiospur wählen (Hauptspur oder Alternativspur)

cmi5-Launch-URL

Für den LMS-Launch sind fünf Parameter Pflicht. Fehlt einer, fällt der Player still in den Standalone-Modus zurück und sendet keine xAPI-Statements.

Parameter	Format	Wirkung
`endpoint`	HTTPS-URL des LRS	Ziel für xAPI-Statements
`fetch`	One-Time-Use-URL	POST liefert Bearer-Token
`actor`	URL-encoded JSON (xAPI-Agent)	Wer absolviert die Lerneinheit
`registration`	UUID v4	Eindeutige Session/Versuchs-ID
`activityId`	IRI	Identifiziert die Lerneinheit (AU)

Real-Beispiel einer fertig gebauten Launch-URL (zur Lesbarkeit umgebrochen, im Original einzeilig):

url

https://aus.kunde.example/yntro-player/index.html?endpoint=https%3A%2F%2Flrs.kunde.example%2Fxapi%2F&fetch=https%3A%2F%2Flms.kunde.example%2Fcmi5%2Ffetch%3Ftoken%3Dot_8f3c1e0a2d4b&actor=%7B%22objectType%22%3A%22Agent%22%2C%22account%22%3A%7B%22homePage%22%3A%22https%3A%2F%2Flms.kunde.example%22%2C%22name%22%3A%22max.mustermann%22%7D%7D&registration=8d4b3c2a-1f5e-4a7b-9c8d-6e2f1a0b3c4d&activityId=https%3A%2F%2Fkunde.example%2Fcourses%2Fecm-onboarding%2Fau%2F01

Du kannst yp-lang oder yp-audio zusätzlich anhängen. Das überschreibt die LMS-Sprache und ist nützlich, wenn dein LMS keine Sprachsteuerung pro Course hinterlegt.

Pflegevorteil

Dein Corporate Design läuft mit

Farben, Typografie und Logos sind nicht ins Video eingebrannt, sondern werden zur Laufzeit über eine Konfigurationsdatei geladen. Wechselt dein CD, wird eine Datei ausgetauscht, und beides zieht automatisch nach: der Player und die Texteinblendungen in den Videos. Logos genauso. Kein neuer Dreh, kein Re-Rendering.

yntro-player-custom.css css

/* yntro-player-custom.css */
:root {
  --yp-color-primary-h: 217;
  --yp-color-primary-s: 84%;
  --yp-color-primary-l: 44%;
  --yp-root-font: "Inter", sans-serif;
}

Was wir liefern

Standards & Konformität

Self-Hosting

Player und Inhalte liegen bei dir. Asset-CDN über `VITE_ASSET_PATH` bzw. `settings.json` frei konfigurierbar. Kein SaaS-Login, kein yntro-Server in der Auslieferungskette.
cmi5 und xAPI

cmi5-Launch-Pattern mit den Statements `initialized`, `completed`, `terminated`. In mehreren cmi5-fähigen LMS erfolgreich erprobt. Item-Level-Statements (Quiz-Scores) sind projektspezifisch ergänzbar.
WCAG 2.1 AA

Konstruktionsstand mit Tastatursteuerung, ARIA-Rollen, schaltbaren Captions und semantischem `<video>`-Element. Externer Audit-Bericht aktuell nicht vorhanden. Die einzelnen Erfolgskriterien erklären wir auf der Seite zu WCAG 2.1 AA.

Tiefere Einordnung: Mehr zu WCAG 2.1 AA .

Häufige Fragen zur Integration

Brauchen meine Nutzer ein Plugin oder eine App?

Nein. Die Videoanleitung läuft direkt im Browser. Kein Download, keine Installation, keine Account-Pflicht. Browser auf, Video läuft.

Können wir das ohne neuen Dreh an unser Corporate Design anpassen?

Ja. Farben, Typografie und Logos werden zur Laufzeit aus einer CSS-Datei und JSON-Inhalten geladen. Wechselt dein CD, wird eine Datei ausgetauscht, und Player UND Videoinhalte (Texteinblendungen, Logos) folgen automatisch. Kein neuer Dreh.

Funktioniert das in unserem LMS?

Ja, wenn dein LMS cmi5 unterstützt. Unsere cmi5-Anbindung ist in mehreren LMS erfolgreich getestet. Dein konkretes LMS validieren wir im Pilot mit dir. Item-Level-Quiz-Statements (result.score) sind im Default-Player nicht implementiert; falls dein Reporting das braucht, ergänzen wir das projektspezifisch.