YouTube Icon Play
Gute Imagefilme und Videos sind von Websites nicht mehr wegzudenken. Viele Besucher sehen sich lieber Videos an, als lange Texte zu lesen. Bewegt Bilder sind eine gute Möglichkeit, die Website optisch aufzuwerten, das Besuchererlebnis zu verbessern, bessere Suchmaschinenrankings zu erzielen und letztlich auch die Abschlussrate (Conversionrate) positiv zu beeinflussen.
DSGVO Update: Seit Inkrafttreten der DSGVO ist die direkte Einbindung von Youtube-Videos datenschutzrechtlich problematisch einzuschätzen. Beim Abrufen des Videos wird die IP-Adresse Deines Websitebesuchers an Google ungefiltert übertragen. Ohne vorherige Einwilligung durch den Besucher ist das kritisch zu sehen. Wir empfehlen, in jedem Fall einen Passus dazu in der Datenschutzerklärung zu hinterlegen. Achte beim Einbinden darauf, bei Youtube die Einstellung „Erweiterten Datenschutzmodus aktivieren" anzuhaken. Dadurch wird verhindert, dass Youtube beim Aufruf des Videos ein Cookie im Browser ablegt.
Zudem empfehlen wir die Integration einer YouTube 2-Klick-Lösung für alle Videos auf der Webseite.
YouTube Video Einbindung leicht gemacht

Wie binde ich ein Youtube Video auf meiner Website ein?

Embed mit Youtube
Youtube stellt umfangreiche Werkzeuge zur Video-Einbindung auf Websites an. Dies erfolgt über einen von Youtube bereitgestellten Embed Code. Der Vorteil gegenüber der Einbindung von Videos über den eigenen Host ist, dass bei einer schlechten Datenleitung Videos gut abgespielt werden können, da Youtube die Daten entsprechend komprimiert und optimal puffert. Der wohl am häufigsten gefragte unerwünschte Effekt bei der Einbindung von Youtube Videos auf Corporate Websites ist die Videoempfehlung am Ende des eingebundenen Clips. Im worst case Fall erscheint hier die Video von Konkurrenten, da die Fremdinhalte thematisch passend erscheinen. Aber auch hierfür gibt es Abhilfe: Mit einem einfachen zusätzlichen Codeschnipsel lässt sich dieses Problem schnell beheben.

Wo finde ich den Embed Code in Youtube?

Den Einbettungscode des Youtube Videos findet man direkt beim Video. Über den Reiter „Teilen” und dann „Einbetten” erscheint der Embed iframe Code. Youtube bietet die Möglichkeit, einige Einstellungen direkt per Klick während des Erstellen des iframe Codes vorzunehmen:
  • Darstellungsgröße des eingebetteten Videos wählen (Breite / Höhe)
  • Vorgeschlagene Videos nach Ende des Videos deaktivieren
  • Play-Steuerelemente, Videotitel und Player-Aktionen ausblenden
Diese Optionen können natürlich auch manuell im Code geändert, ergänzt oder gelöscht werden. Im Vorschau Modus können die Änderungen direkt angezeigt und getestet werden.
Youtube Teilen Funktion zum Embed auf der Website
So kommt Ihr zu dem Embed Code eueres Youtube Videos.
Youtube Embed Code
Per Klick könnt Ihr einige Einstellungen schon direkt in Youtube vornehmen.
Einstellungen Youtube Embed Code

Code Parameter für Youtube Videos

Die Einstellungen per Klick sind bei weitem noch nicht alle Möglichkeiten, die bei der Einbettung von Youtube Videos genutzt werden können. Es gibt insgesamt 20 Parameter, die man im Code manuell einfügen und ändern kann. Hier ein kurzer Überblick über die verschiedenen Parameter.
autoplayDieser Parameter legt fest, ob das Video automatisch startet, wenn der Player geladen ist (Werte: 0 oder 1)
cc_load_policyMit diesem Parameter können Untertitel eingeblendet werden (Wert: 1)
colorMit diesem Parameter kann die Farbe der Fortschrittsanzeige des Players verändert werden
controlsÜber diesen Parameter wird die Einblendung der Steuerung des Video Players festgelegt (Werte: 0, 1 oder 2)
disablekbMit diesem Parameter kann die Tastatursteuerung des Players deaktiviert werden (Werte: 0 oder 1)
enablejsapiÜber diesen Parameter kann die Javascript API aktiviert werden (Werte: 0 oder 1)
endDieser Parameter ermöglicht die Wiedergabe des Players zu einem bestimmten Zeitpunkt zu beenden. Die Zeit wird in Sekunden und ab dem Anfang des Videos gemessen. (Wert: beliebige positive ganze Zahl)
fsÜber diesen Parameter kann die Schaltfläche für den Vollbildmodus ausgeblendet werden (Werte: 0 oder 1)
iv_load_policyDieser Parameter regelt die Ausgabe der Video-Anmerkungen (Wert: 1 oder 3)
list & listTypeDer list-Parameter identifiziert, in Zusammenarbeit mit dem listType-Parameter, Inhalte, die im Player geladen werden
loopDieser Parameter löst die fortwährende Wiedergabe des Videos oder der Playlist aus (Werte: 0 oder 1)
modestbrandingÜber diesen Parameter kann das Youtube Logo im Player ausgeblendet werden
originDieser Parameter ist eine zusätzliche Sicherheitsmaßnahme. Beim verwenden des enablejsapi-Parameters sollte die eigene Domain als origin-Parameter angegeben werden
playlistDieser Parameter ist eine durch Kommas getrennte Liste von Video-IDs
playsinlineMit diesem Parameter wird festgelegt, ob Videos inline oder im Vollbildmodus in einem HTML5-Player auf iOS-Geräten wiedergegeben werden
relÜber diesen Parameter wird festgelegt, ob am Ende des Videos ähnliche Videos vorgeschlagen werden (Wert: 0 oder 1)
showinfoDieser Parameter erlaubt es, Informationen wie Videotitel oder Uploader nicht im Player anzuzeigen
startMit diesem Parameter kann eine benutzerdefinierte Startposition des Videos festgelegt werden (Wert: positive ganze Zahl)
Hier könnt Ihr noch mehr zu den Parametern erfahren.

So blende ich Related Videos per Code aus

Unerwünscht sind „Related Videos”, die beispielsweise am Ende eines Produktvideos erscheinen. Hat man ein Produktvideo auf der Website integriert, möchte man nicht, dass womöglich Videos der Konkurrenz empfohlen werden. Das ausblenden der verwandten Videos wird über den Parameter ?rel=0 gelöst. Dieser Zusatz wird einfach an das Ende des Youtube Links angehängt.
<iframe src="https://www.youtube.com/embed/Vhy0urJxLZQ?rel=0" width="560" height="315" frameborder="0" allowfullscreen="" >

So aktiviere ich die Autoplay Funktion

Soll das Video automatisch gestartet werden, hängt man den Parameter ?autoplay=1 an seinen Link.
<iframe src="https://www.youtube.com/embed/Vhy0urJxLZQ?autoplay=1" width="560" height="315" frameborder="0" allowfullscreen="" >

So kann ich die Darstellungsgröße des Videos ändern

Über die Parameter width und height kann ganz einfach die Größe des Videos geändert werden.
<iframe src="https://www.youtube.com/embed/Vhy0urJxLZQ" width="850" height="420" frameborder="0" allowfullscreen="" >

So kombiniere ich mehrere Parameter für ein Video

Selbstverständlich kann man die verschiedenen Optionsmöglichkeiten innerhalb eines Videos kombinieren. Wichtig dabei ist, dass nur der erste Zusatz mit einem „?” versehen wird, alle weiteren Zusätze werden mit einem „&” angehängt. So können beliebig viele Befehle angehängt werden. Sollen beispielsweise die „Related Videos“ ausgeblendet und das „Autoplay“ aktiviert werden, sieht der Linkanhang so aus: ?rel=0&autoplay=1
<iframe src="https://www.youtube.com/embed/Vhy0urJxLZQ?autoplay=1&rel=0" width="560" height="315" frameborder="0" allowfullscreen="" >
Wer die Befehle nicht manuell an den Link anhängen möchte, kann einen Video Embed Generator zur Hilfe nehmen.