YouTube-Videos einbetten mit den besten Optionen
Wie bindest du ein YouTube-Video in deiner Webseite ein?
Das geht im Prinzip ganz einfach! Es gibt aber ein paar zusätzliche Parameter, die du (aus Marketingsicht) benutzen solltest, damit deine Besucher auf deiner Webseite bleiben und nicht "für immer" verschwinden.
Fangen wir zuerst mit dem grundsätzlichen Einbinden an und dann erzähle ich dir von den Parametern und wie du sie für dich nutzen kannst...
Die Grundeinstellungen für das Einbinden
... oder, wo bekomme ich den Einbettungs-Code her?
Unter jedem Video findest du einen "Teilen-Link".
Nachdem du den "Teilen-Link" angeklickt hast, bekommst du einen Code, mit dem du deine YouTube-Videos aber nicht einbetten kannst.
Um das Video auf deiner Webseite einzubinden, musst du jetzt noch auf "Einbetten" klicken.
Bevor du den Code kopierst und auf deiner Webseite einfügen kannst, solltest du unter dem Code den Haken bei "erweiterte Datenschutzeinstellungen" machen.
Das verhindert, dass YouTube schon Daten überträgt, bevor das Video gestartet wurde. Ist also etwas Datenschutz-konformer.
Die Steuerelemente sind standardmäßig aktiviert und sollten es in der Regel auch bleiben. Mehr dazu erkläre ich unten bei den möglichen Optionen.
Wenn du möchtest, kannst du noch bei "Starten bei" eine Zeit angeben, ab der das Video starten soll, falls du den Anfang überspringen möchtest.
Danach kopierst du dir den Code und fügst ihn am besten zur weiteren Verarbeitung in einen Texteditor ein, denn jetzt wollen wir noch einige "Feinjustierungen" vornehmen, die du weiter unten findest.
Zuerst legen wir die die Videogröße fest. Es gibt gängige Formate oder du wählst eine "eigene Größe" aus.
Wichtig ist, dass du dein Video in dem gleichen Seitenverhältnis einbindest, wie es ursprünglich erstellt wurde.
Das ist heutzutage normalerweise das Seitenverhältnis 16:9.
Gängige Größen für dieses Verhältnis sind:
Oder, falls du es selbst berechnen möchtest:
1920:1080 = gekürzt = 16:9 = 1,77:1
Du kannst also eine beliebige Breite mit 1,77 multiplizieren oder deine Höhe durch 1,77 teilen, um das Seitenverhältnis 16:9 zu bekommen.
Die gewünschte bzw. errechnete Größe gibst du dann oben in dem Code ein:
Alle weiteren Optionen habe ich unten für eine bessere Übersicht in einer Tabelle aufgelistet.
Zuerst möchte ich aber noch klären, was du jetzt mit diesem Code machst und wie du die verschiedenen Optionen anwenden kannst.
Wie binde ich den generierten Code auf meiner Webseite ein?
... oder wie kann ich nun tatsächlich meine YouTube-Videos einbetten - finally.
Weil ich viel mit WordPress arbeite und das auch immer wieder empfehle, zeige ich das am Beispiel WordPress. Das Einbinden funktioniert aber immer auf die gleiche Art und Weise.
Entscheidend ist, dass du den Code in ein Feld einfügst, das die "Programmiersprache html" versteht. Das klingt jetzt komplizierter, als es ist. Im Zweifelsfall einfach mal testweise einfügen. Entweder es funktioniert oder du musst etwas tiefer in dein System einsteigen.
Für WordPress funktioniert das so:
In dem normalen Text-Editor musst du von Visuell auf Text umstellen, damit der Code richtig angezeigt wird. Du kannst danach direkt wieder auf Visuell umschalten und normal weiterarbeiten.
... und so kannst du deine YouTube-Videos einbetten:
Wenn du einen speziellen Editor, wie Thrive Architect, Beaver Builder, Elementor benutzt, kannst du den Code über einen WordPress oder html-Block einbinden.
Manche Editoren haben allerdings auch eigene Video-Blöcke, in denen du dann nur die Video-URL einfügst und die Einstellungen dann direkt in diesem Editor machst.
Aber wir sprechen jetzt weiter über den eingefügten html-Code, weil du damit die meisten Einstellungsmöglichkeiten bekommst.
Grundsätzlich kannst du dir die Wirkungsweise der Parameter über diese Webseite anschauen: https://developers.google.com/youtube/youtube_player_demo
Dort kannst du die Parameter einstellen indem du oben auf der Seite über "Player-Steuerelemente Anzeigen" anklickst. Da kannst du dann die Parameter, die hier unten erklärt sind, anklicken und oben auf den Button "Player mit ausgewählten Optionen aktualisieren" klicken.
wenn du danach das Video abspielst, kannst du den Effekt der Einstellungen im Video sehen.
Allerdings kannst du da nicht, deinen bereits erstellten Einbettungs-Code verwenden. Deshalb empfehle ich dir, die gewünschten Parameter lieber, wie hier unten beschrieben, von Hand hinzuzufügen.
Optionen der YouTube-Videos einstellen
... oder, was kann ich denn eigentlich alles einstellen?
Möchtest du bei deinem Video eine Option anwenden, hängst du die gewünschte Option mit einem "?" direkt an die "Video-Adresse" in deinem kopierten Code an.
Nehmen wir an, du möchtest am Ende die Vorschläge für andere Videos umstellen. Der Code dafür wäre "rel=0".
Dann hängst du an den Namen das folgende Kürzel an: ?rel=0
Das würde dann zum Beispiel so aussehen:
src="https://www.youtube-nocookie.com/embed/_e9deK2MLiU?rel=0"
Wenn du mehrere Optionen anwenden willst, werden die Optionen durch "&" getrennt (ohne Leerschritte). Wenn du im oberen Beispiel sowohl die Vorschläge am Ende (rel=0) als auch die Steuerelemente (controls=0) ändern willst, dann sieht der Code wie folgt aus: ?rel=0&controls=0
src="https://www.youtube-nocookie.com/embed/_e9deK2MLiU?rel=0&controls=0"
Und so kannst du so viele Optionen wie du willst, einbinden:
?rel=0&controls=0&loop=1 usw.
Die Reihenfolge ist dabei egal. ?loop=1&controls=0&rel=0 ergibt also das gleiche Ergebnis.
Hier unten habe ich jetzt alle Optionen aufgelistet, die du aktuell nutzen kannst. In der oberen Tabelle sind die Funktionen, die du auch auf dieser Seite finden kannst:
https://developers.google.com/youtube/youtube_player_demo
Die zweite Tabelle enthält noch ein paar weitere Optionen, die du vielleicht verwenden möchtest.
Wenn du am Ende alle Optionen angehängt hast, die du verwenden möchtest, kopierst du den gesamten geänderten Code in den html-Block.
Liste aller möglichen Optionen
... verständlich erklärt und mit Empfehlungen für dein Marketing.
Mögliche Optionen | Das bewirkt es: |
|---|---|
autoplay=0 | Legt fest, ob das Video automatisch startet, wenn der Besucher auf die Webseite kommt. 0 = Das Video startet nicht automatisch 1 = Das Video startet automatisch Wenn der Wert nicht angegeben ist, wird das Video nicht automatisch gestartet..
Aus Marketingsicht sollten die Videos normalerweise nicht sofort starten, also auf 0 eingestellt sein, weil sich viele Menschen davon gestört fühlen und auch unter Umständen mehrere Videos gleichzeitig anlaufen würden. Bei Landeseiten oder in einer Verkaufs-Video-Serie sollten die Videos dagegen sofort starten (also auf 1 eingestellt sein). |
cc_load_policy=0 | Legt fest, ob die Untertitel bei Start aktiviert sind. 0 = Untertitel müssen selbst aktiviert werden 1 = Untertitel werden direkt eingeblendet Wenn der Wert nicht angegeben ist, sind die Untertitel deaktiviert.
Aus Marketingsicht ist es wahrscheinlich besser, die Untertitel zu aktivieren, falls das Video ohne Ton startet, kann der Zuschauer trotzdem den Inhalt verfolgen. |
color=red | Legt die Farbe fest, die der Fortschrittsbalken hat. Wenn der Wert nicht angegeben ist, ist rot der Standard.
Aus Marketingsicht ist das nicht relevant. |
controls=0 | Blendet die Zeitleiste, das Pause/Start-Symbol, den Lautstärkeregler, die Einstellungsoptionen, die Auswahl für Untertitel und die Vollbildauswahl ein oder aus (also die gesamte Steuerleiste unten). 0 = Steuerelemente werden nicht angezeigt (nur Pause und Start möglich) 1 = Steuerelemente werden sofort angezeigt. 2 = Steuerelemente werden nach dem Start angezeigt. Das ist die offizielle Angabe, ich konnte bei Tests aber keinen Unterschied zwischen 1 + 2 feststellen. Wenn der Wert nicht angegeben ist, werden die Steuerungselemente eingeblendet mit der Einstellung von Wert 1.
Aus Marketingsicht solltest du diese Option immer auf 1 oder 2 schalten, wenn du etwas auf einer "normalen Webseite" veröffentlichst. |
disablekb=0 | Die Playertastatur-Elemente werden aktiviert oder deaktiviert. 0 = Playertastatur aktiviert 1 = Playertastatur deaktiviert Wenn der Wert nicht angegeben ist, ist die Playertastatur aktiviert.
Aus Marketingsicht solltest du diese Option immer auf 0 stehen lassen. Das ist für deine Zuschauer die gewohnte Bedienbarkeit und es gibt keinen Grund das abzuschalten. |
enablejsapi=0 | Alle Kontrollelemente (die ich hier beschreibe) werden abgeschaltet. Wenn der Wert nicht angegeben ist, sind die Kontrollelemente aktiviert. 0 = Kontrollelemente aktiviert 1 = Kontrollelemente deaktiviert
Aus Marketingsicht solltest du diese Option immer auf 0 stehen lassen. Wir wollen ja grade das Verhalten des Players beeinflussen können, da ist diese Funktion also nicht sinnvoll. |
end=1 - ~ | Das Video an jeder beliebigen Stelle beenden. Wenn du das Video nicht in voller Länge einbetten willst, kannst du mit dieser Einstellung sekundengenau festlegen, wann das Video enden soll. |
fs=0 | Die Funktion für die Vollbildanzeige wird ein- oder ausgeblendet. Wenn der Wert nicht angegeben ist, ist die Vollbildanzeige möglich. 0 = Vollbildanzeigen nicht möglich 1 = Vollbildanzeige möglich
Wenn der Wert nicht angegeben ist, ist die Vollbildanzeige möglich. |
hl= | Bei dieser Einstellung wird die Sprache des Players geändert. Wenn du z.B. eine englischsprachige oder französischsprachige Seite hast, kannst du damit erzwingen, dass die Beschriftung und die Standarduntertitel in der gewählten Sprache angezeigt werden. hl = eine beliebige Sprache z.B. = en, de, fr
Wenn der Wert nicht angegeben ist, wird die Sprache deines Accounts gewählt. |
iv_load_policy=1 iv_load_policy=3 | Blendet Anmerkungen aus. |
list= ID | Gibt dir die Möglichkeit eine ganze Playliste einzubinden. |
loop=0 | Wiederholt ein einzelnes Video oder eine Playliste und startet immer wieder von vorne. 0 = Das Video wir nur einmal abgespielt. 1 = Das Video wird wiederholt. Wenn der Wert nicht angegeben ist, wird das Video nur einmal bis zum Ende abgespielt. |
modestbranding=0 | Blendet das Youtube-Logo in der Steuerleiste ein und aus. Wenn das Logo ausgeblendet wird, erscheint aber auf dem Video ein durchscheinendes YouTube-Logo. (Also eigentlich wird das Logo nur anders angezeigt.) 
0 = Das Logo ist in der Steuerleiste. 
1 = Das Logo ist durchscheinend im Bild Wenn der Wert nicht angegeben ist, wird das Logo in der Steuerleiste angezeigt.
Aus Marketingsicht kann ich keine genaue Empfehlung geben. Das Logo im Bild ist zwar weniger deutlich sichtbar, dafür wird es aber die ganze Zeit über eingeblendet, auch wenn das Video gestoppt ist. Wenn du da genau wissen willst, was besser ist, müsstest du es testen. |
playlist=videoID1,videoID2 | Mit dieser Einstellung kannst du mehrere Videos nacheinander abspielen. Dazu hängst du die Video IDs der gewünschten Videos mit Komma getrennt an den playlist= Code an. |
playsinline=0 playsinline=1 | Mit dieser Einstellung kannst du für Geräte mit iOS 10 oder höher den erzwungenen Vollbildmodus für Apple-Geräte ein oder ausschalten. Standardmäßig werden Videos auf diesen Geräten im Vollbildmodus angezeigt. 0 = Der Vollbildmodus ist angeschaltet 1 = Der Vollbildmodus ist abgeschaltet Diese Einstellung ist (wie erwähnt) nur für Geräte mit iOS 10 und höher relevant. Trotzdem ist es eine gute Idee, dieses Parameter zu benutzen.
|
start=zahl | Mit dieser Einstellung kannst du die Startposition des Videos festlegen. Es fängt dann zum Beispiel bei 1:30 Minuten an abzuspielen.
Aus Marketingsicht ist es so möglich, ein Video auf die wesentlichen Aussagen zu kürzen. |
Weitere Optionen, die sinnvoll sein können:
Mögliche Optionen | Das bewirkt es: |
|---|---|
rel=0 | Die Anzeige von Videovorschlägen am Ende des Videos umschalten. 0 = Am Ende werden nur Vorschläge von deinem Kanal gezeigt. 1 = Am Ende werden Vorschläge von anderen Kanälen gezeigt. Wenn der Wert nicht angegeben wird, werden immer Vorschläge von verschiedenen Kanälen angezeigt.
Aus Marketingsicht solltest du diese Option immer auf 0 schalten, weil sonst die Besucher deiner Webseite, Konkurrenzangebote sehen könnten. |
autohide=0 | Legt fest, ob die Steuerleiste die ganze Zeit sichtbar ist oder ausgeblendet wird. (Wenn der Besucher mit der Maus über das Video geht, wird die Steuerleiste wieder angezeigt.) 0 = Die Steuerung bleibt eingeblendet 1 = Die Steuerung wird ausgeblendet Wenn der Wert nicht angegeben ist, werden die Steuerungselemente automatisch ausgeblendet mit der Einstellung von Wert 1.
Aus Marketingsicht ist diese Option allenfalls relevant, wenn du deinem Besucher zeigen willst, dass er das Video schnell ansehen kann - die meisten Menschen haben keine Zeit [aber surfen dabei stundenlang im Internet 🙂 ]. |
showinfo=0 | Diese Einstellung legt fest, ob beim Start des Videos der Titel und der Name des Autors eingeblendet wird. 0 = Der Titel und Name wird nicht angezeigt 1 = Der Titel und der Name werden angezeigt. Wenn der Wert nicht angegeben ist, wird die Einstellung 1 verwendet, die den Titel anzeigt.
Aus Marketingsicht würde ich den Namen und den Titel nicht einblenden. Ein gutes Video sollte sowieso alle relevanten Informationen enthalten und diese Einblendung lenkt von dem eigentlichen Inhalt ab. |
So, ich hoffe, das hat etwas Klarheit in dieses Thema gebracht. Falls doch noch Fragen aufkommen, falls du Lob oder Verbesserungsvorschläge loswerden willst, freue ich mich über deinen Kommentar!
Herzliche Grüße
Henning Klocke
funktioniert irgendwie nicht mehr, weil ich die Ausgabegröße in den Optionen gar nicht mehr habe, anscheinend geht jetzt nur noch eine Standardgröße
Hallo Dirk, ja Youtube hat leider einiges geändert.
Jetzt kannst du im Prinzip alle Einstellungen auf dieser Seite vornehmen:
https://developers.google.com/youtube/youtube_player_demo
Nachdem du die Parameter eingestellt hast, klickst du oben auf „Player-Steuerelemente anzeigen“ und bekommst dann auf der rechten Seite den „iframe-Code“ angezeigt.
Den kannst du dann wie gewohnt mit den obenstehenden Parametern „verfeinern“.
Hi Henning, das hast du schön anschaulich und übersichtlich erklärt. Sobald ich meine Videoproduktion starte, wird mir dein Artikel eine große Hilfe sein. Danke!
Hallo Karin, das freut mich sehr, dass es dir hilft. Und toi, toi, toi für deine Videoproduktion!