VionetoVioneto
Zurück zum Magazin

VIONETO MAGAZIN Hosting & Einbetten

Video einbetten: Player, Popup oder Videoseite?

Ein Video kann direkt in deiner Website stehen, sich nach einem Klick im Popup öffnen oder über eine eigene Seite erreichbar sein. So findest du die passende Lösung und gibst den richtigen Link weiter.

Aktualisiert:

Drei Wege für ein Video: direkt auf der Website, nach Klick im Popup und über eine eigene Videoseite.
Die Darstellungsform folgt dem Weg deiner Zuschauer.Bild: Vioneto · eigene Illustration

Du möchtest ein Produkt zeigen, eine Anleitung erklären oder einen Kurs bereitstellen. Das Video ist fertig – doch wie kommt es sinnvoll zu deinen Zuschauern? Entscheidend ist zuerst, wo sie es ansehen sollen: direkt im Inhalt deiner Website, in einem Fenster nach einem Klick oder auf einer eigenen Videoseite.

Diese drei Wege erfüllen unterschiedliche Aufgaben. Ein Player mitten im Artikel kann die Erklärung ergänzen. Ein Popup hält eine Angebotsseite übersichtlich. Ein eigener Videolink eignet sich, wenn du ohne zusätzlichen Webseitenbau etwas verschicken möchtest. Du musst dafür nicht jedes Mal ein neues Video hochladen.

Welcher Weg passt zu deinem Inhalt?

Direkt einbetten: wenn das Video zum Seiteninhalt gehört

Ein eingebetteter Player steht dort, wo du ihn auf deiner Website platzierst. Die Besucher bleiben im Zusammenhang deiner Seite: Sie lesen beispielsweise eine Produktbeschreibung und sehen unmittelbar darunter die passende Vorführung.

Technisch kann ein iframe die Playerseite in deine Website einbinden. Das Video selbst muss dafür nicht als Datei in deinen Webseiteneditor hochgeladen werden. Für die Besucher zählt vor allem, dass der Player an der richtigen Stelle sitzt und auf kleinen Bildschirmen in den verfügbaren Bereich passt.

Technischer Hintergrund: iframe bei MDN

Im Popup öffnen: wenn der Klick den Anfang machen soll

Ein Popup ist ein Fenster über deiner vorhandenen Seite. Der Besucher entscheidet mit einem Button wie „Video ansehen“, ob er die zusätzliche Erklärung öffnen möchte. Das ist hilfreich, wenn ein Video vertieft, aber nicht die gesamte Seite bestimmen soll.

Beim Vioneto-Popup wird der Player beim Öffnen geladen; die Wiedergabe startet manuell. Schließen beendet die Wiedergabe und entlädt den Player. Wer das Popup erneut öffnet, beginnt wieder von vorn. Prüfe deshalb, ob dieser Ablauf zu deinem Inhalt passt – besonders bei längeren Schulungen.

Kopiere den vollständigen Popup-Code. Er enthält neben dem Button und dem Fenster auch Skripte für die Steuerung. Dein Webseiteneditor muss diesen Code zulassen. Ein normaler Textblock oder ein Editor, der Skripte entfernt, kann daraus keinen funktionierenden Popup-Player machen.

Eine Videoseite teilen: wenn du einen eigenständigen Link brauchst

Eine Videoseite bietet deinem Video einen eigenen Rahmen mit den von dir gespeicherten Seiteninhalten und der gewählten Gestaltung. Du kannst den Zuschauerlink beispielsweise in einer Nachricht oder in einem Kundenbereich weitergeben. Dafür brauchst du auf deiner eigenen Website keinen neuen Inhaltsblock.

Für mehrere zusammengehörige Videos eignet sich eine Ordnerseite als Videoreihe. Dort stellst du Auswahl, Reihenfolge und gemeinsame Einführung zusammen. Die Reihe ersetzt die Freigaben ihrer einzelnen Videos nicht: Die ausgewählten Videos brauchen den passenden Videozugang und eine freigegebene Videoseite.

So gehst du in Vioneto vor

Beginne in der Mediathek mit dem Video, das du verwenden möchtest. Ein verständlicher Titel und ein passender Ordner helfen dir später, den richtigen Clip wiederzufinden. Das ist besonders nützlich, wenn ähnliche Versionen, mehrere Produkte oder verschiedene Kursabschnitte nebeneinander liegen.

Vioneto-Mediathek mit Ordnern, Suche und Videokarten anhand von Beispieldaten.
Produktansicht mit Beispieldaten: Titel, Ordner und Suche helfen, das richtige Video vor dem Einbetten zu finden.Bild: Vioneto · Produktansicht mit Beispieldaten
  1. Video vorbereiten: Warte, bis die Verarbeitung abgeschlossen ist, und prüfe den Inhalt in der Vorschau.
  2. Player einstellen: Speichere die gewünschte Gestaltung, Startverhalten und vorhandene Untertitel oder Kapitel.
  3. Zugang bewusst einrichten: Öffne „Zugriff & Einbetten“ und bestätige die benötigte Freigabe sowie passende Schutzregeln.
  4. Ausgabe wählen: Kopiere den Code für den Videoplayer oder das Popup. Für eine eigene Videoseite speichere und bestätige zusätzlich deren Seitenfreigabe.
  5. Ergebnis am Ziel prüfen: Öffne die fertige Website oder den Zuschauerlink ohne Kundenanmeldung.

Für die Einbettung setzt du den vollständigen Code in einen dafür vorgesehenen HTML- oder Einbettungsbereich deines Webseiteneditors. Passe die Breite des äußeren Bereichs an dein Layout an. Kontrolliere anschließend die veröffentlichte Seite selbst, denn die Vorschau deines Webseiteneditors kann sich anders verhalten.

Vorschau, Speichern und Freigeben auseinanderhalten

Eine private Vorschau hilft dir beim Gestalten. Sie ist jedoch kein Zuschauerlink und kann eine Anmeldung in deinem Kundenkonto voraussetzen. Wenn du genau diese Adresse weitergibst, sehen andere möglicherweise eine Anmeldung statt deines Videos.

Auch das Speichern einer Videoseite und ihre Freigabe sind zwei getrennte Schritte. Ein gespeicherter Entwurf verändert die bereits freigegebene Seitenfassung nicht automatisch. Wenn Zuschauer eine ältere Überschrift oder Gestaltung sehen, kontrolliere deshalb zuerst, ob du den neuen gespeicherten Entwurf erneut freigegeben hast.

Prüfe den Zugang aus Sicht eines Zuschauers. Ein privates Browserfenster hilft, deine Kundenanmeldung aus dem Test herauszuhalten. Bei einer Domainbegrenzung testest du die Einbettung auf der tatsächlich erlaubten Website: Ein direkt geöffneter Videolink bietet diesen Einbettungskontext nicht.

Ein Popup oder eine Ordnerseite hebt Passwort-, Domain- und Zeitregeln nicht auf. Wähle die Darstellungsform nach dem gewünschten Ablauf und den Zugang danach, wer das Video ansehen soll. Das sind unterschiedliche Einstellungen.

Ein guter Start braucht keinen automatischen Ton

Plane einen sichtbaren Startknopf ein. Browser können einen automatischen Start mit Ton blockieren; eine aktivierte Autoplay-Option garantiert ihn deshalb nicht auf jedem Gerät. Teste außerdem, ob Vorschaubild und Beschriftung deutlich machen, was nach dem Klick passiert.

Warum automatischer Start begrenzt sein kann: MDN

Laden und Bedienung auf der echten Seite prüfen

Mehrere sofort geladene Player können unnötige Arbeit erzeugen. Lade Zusatzinhalte möglichst erst, wenn sie gebraucht werden. Beim Vioneto-Popup geschieht das Öffnen des Players nach dem Klick. Ein wichtiges Video direkt am Seitenanfang solltest du dagegen nicht pauschal hinter verzögertem Laden verstecken.

Hintergrund zum bedarfsgerechten Laden von Videos: web.dev

Untertitel sollten verständlich wiedergeben, was gesprochen wird und welche wichtigen Geräusche zum Inhalt gehören. Ein Transkript kann ergänzen. Wenn zentrale Informationen nur als Bild oder eingeblendeter Text vorkommen, brauchen Zuschauer außerdem eine passende sprachliche oder textliche Erklärung. Prüfe den Weg zum Video und seine Bedienung auch mit der Tastatur.

Medien zugänglich gestalten: W3C WAI

Die kurze Prüfung vor dem Teilen

  • Steht das richtige Video in der richtigen Fassung auf der Seite?
  • Passt der Player auf dem Smartphone in den sichtbaren Bereich?
  • Lässt sich das Video starten, pausieren und verständlich bedienen?
  • Sind Untertitel und wichtige Erklärungen vorhanden und lesbar?
  • Öffnet und schließt das Popup sauber, falls du diese Variante verwendest?
  • Funktioniert der Zuschauerzugang ohne deine Kundenanmeldung und im vorgesehenen Domainkontext?
  • Zeigt eine Videoseite oder Reihe die tatsächlich freigegebene Fassung?

Wähle für eine Erklärung im Seitenfluss den eingebetteten Player, für eine Ergänzung nach Klick das Popup und für einen eigenständigen Aufruf die Videoseite. Eine Videoreihe hilft, wenn mehrere Inhalte zusammengehören. So entscheidet der gewünschte Weg deiner Zuschauer über die Darstellung – und nicht die Frage, welchen Code du zuerst gefunden hast.

Videos mobil einbetten: Seitenverhältnis und Darstellung prüfen

Videohosting vergleichen: Kriterien und Kosten einordnen

Schlagwörter

Quellen und weiterführende Informationen

  1. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe
  2. https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Autoplay
  3. https://www.w3.org/WAI/media/av/
  4. https://web.dev/articles/lazy-loading-video