Oktober 6, 2015

YouTube-Videos einbetten

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 Parameter, die du (aus Marketingsicht) benutzen solltest, damit deine Besucher auf deiner Webseite bleiben und nicht "für immer" verschwinden.

UPDATE 2018:

In YouTube sind einige Änderungen vorgenommen worden.

Um den Grundcode zu bekommen, gehst du jetzt auf diese Webseite : https://developers.google.com/youtube/youtube_player_demo

Dort kannst du die Parameter einstellen und dann oben auf der Seite über "Player-Steuerelemente Anzeigen" den "iframe-Code" bekommen, in den du dann die Parameter, die hier unten erklärt sind, einfügen kannst.

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.

Und dann für die weiteren, wichtigen Optionen auf "MEHR ANZEIGEN".

Die erste Option, die du einstellen kannst, ist die Videogröße. Es gibt fertige Formate oder du wählst die "Benutzerdefinierte Größe" aus.
Wenn du z.B. eine bestimmte Breite für dein Video haben möchtest, dann gibt YouTube automatisch die passende Höhe vor, damit das Video nicht verzerrt wird.

Wenn du den ersten Punkt ankreuzt, bedeutet das, dass am Ende des Videos keine Videovorschläge angezeit werden. (siehe Tabelle unten "rel")
Der zweite Punkt bewirkt (angekreuzt), dass die Steuerleiste unter dem Video angezeigt wird. (Siehe Tabelle unten "controls")
Der dritte Punkt bewirkt, dass beim Videostart der Titel und der Name angezeigt werden. (Siehe Tabelle unten "showinfo")
Der vierte Punkt schützt deine Besucher davor, dass Daten über sie an YouTube weitergeleitet werden. Erst wenn der Besucher das Video wirklich ansieht, werden Informationen übertragen und gespeichert. (Youtube möchte natürlich so viele Daten wie möglich haben. Aus Datenschutzgründen würde ich diesen Haken immer setzen.)

Alle weiteren Optionen liste ich gleich für eine bessere Übersicht in einer Tabelle auf.

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:

Optionen der YouTube-Videos einstellen

... oder, was kann ich denn eigentlich alles einstellen?

Hier ist einmal ein Code, wie er von YouTube kopiert werden kann. Dieser Code enthält keine besonderen Optionen. Nur die Größe ist bereits vorgegeben (width=Breite + height=Höhe).

[code][/code]

Möchtest du jetzt eine Option anwenden, hängst du die gewünschte Option mit einem "?" direkt an die "Video-Adresse" an.
Nehmen wir an, du möchtest am Ende die Vorschläge für andere Videos abschalten. 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 im oberen Beispiel so aussehen:

[code][/code]

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) ausschalten willst, dann sieht der Code wie folgt aus:    ?rel=0&controls=0

[code]