Ob auf Social Media, Blogs, Unternehmenswebsites oder in Apps: Videoinhalte werden immer beliebter und gehören in vielen Unternehmen bereits zum Standard der Marketingstrategie. Um das Bewegtbild auf der eigenen Website anzeigen zu lassen, wird häufig auf YouTube-Videos zurückgegriffen.
Wie Sie ein YouTube-Video auf Ihrer eigenen Website einbetten können und was Sie beachten sollten, damit der Player mobiloptimiert ausgespielt wird, erfahren Sie in diesem Artikel.
![→ Kostenloser Ressource: YouTube for Business Kit [Jetzt herunterladen]](https://no-cache.hubspot.com/cta/default/53/db05418b-bbd2-4e1a-baab-5324d513c392.png){kind=small}
Mithilfe von HTML ein YouTube-Video einbinden: So funktioniert’s
YouTube-Videos lassen sich ganz einfach in den HTML-Code Ihrer Website integrieren. Alles, was Sie dazu benötigen, ist die passende Stelle im HTML-Dokument und den „Embed Code“ (zu Deutsch: Einbettungscode) Ihres YouTube-Videos. Abhängig davon, ob Sie Ihre Website mit einem Drag-and-Drop-Builder oder mittels HTML-Doc bauen, können Sie entweder ein einfaches Videoelement hinzufügen oder Sie müssen zu der Stelle des HTML-Codes gehen, an der Sie Ihr YouTube-Video einbetten möchten.
Nun fügen Sie den kopierten Embed Code an die entsprechende Stelle ein. Anschließend müssen Sie die Änderung nur noch abspeichern und Ihre Webseite veröffentlichen. Überprüfen Sie als Letztes noch, ob das Video tatsächlich an der gewünschten Position ausgespielt wird und ob der Abspielmodus funktioniert.
Embed Code für YouTube-Videos: Hier finden Sie ihn
Um den Embed Code Ihres YouTube-Videos zu erhalten, besuchen Sie einfach die Webseite des Clips.
- Unterhalb des Videos finden Sie die Option „Teilen“. Klicken Sie auf die Schaltfläche und wählen Sie „< > Einbetten“ aus.
Quelle: Screenshot YouTube
- Wählen Sie nun unter „Optionen zum Einbetten“ > „Erweiterten Datenschutzmodus aktivieren“ aus.
Quelle: Screenshot YouTube
- Kopieren Sie anschließend den vollständigen HTML-Code. Optional haben Sie über den Punkt „Starten bei“ die Möglichkeit auszuwählen, ab welchem Zeitpunkt des Videos der Abspielmodus beginnen soll.
Quelle: Screenshot YouTube
- Nun müssen Sie den Embed Code nur noch an die gewünschte Stelle auf Ihrer Website einfügen.
Diese YouTube-Parameter helfen Ihnen beim Einbinden
Wenn Sie den Embed Code kopieren, werden Sie bemerken, dass er verschiedene Parameter enthält. Diese sind standardmäßig voreingestellt. Sie haben jedoch die Möglichkeit, das Design und den Abspielmodus Ihres eingebetteten YouTube-Videos an Ihre eigenen Wünsche anzupassen. Dazu stehen Ihnen eine Reihe von Parametern zur Verfügung:
| Parameter | Beschreibung |
| autoplay | Dieser Parameter kann die Werte 1 und 0 annehmen. Er sorgt dafür, dass das Video beim Laden der Website automatisch gestartet wird. |
| cc_load_policy | Verwenden Sie diesen Parameter, um die Untertitel des Videos einzublenden. |
| color | Ändern Sie die Farbe des Players mit diesem Parameter. |
| controls | Um die Steuerung ein- oder auszublenden, nutzen Sie diesen Parameter. |
| disablekb | Mit diesem Parameter aktivieren (1) oder deaktivieren (0) Sie die Tastatursteuerung. |
| enablejsapi | Aktivieren Sie die Javascript API mit diesem Parameter. |
| end | Mit end können Sie angeben, bei welcher Sekundenzahl des Videos der Clip beendet werden soll. Es sind nur ganze Zahlen möglich. |
| fs | Blenden Sie die Funktion zum Vollbildmodus mit diesem Parameter aus. |
| iv_load_policy | Lassen Sie mit diesem Parameter Videoanmerkungen ein- oder ausblenden. |
| list & listType | Definieren Sie mit diesen beiden Parametern, welche Inhalte geladen werden sollen. |
| loop | Sie können das Video wiederholen oder nach einmaligem Abspielen beenden. |
| modestbranding | Möchten Sie das YouTube-Logo im Abspielmodus ausblenden, verwenden Sie diesen Parameter. |
| origin | Mit diesem Parameter sorgen Sie dafür, dass Ihre Domain im enablejsapi angeben wird. |
| playlist | Lassen Sie eine Playlist abspielen, indem Sie mehrere Video-IDs mit Kommata getrennt hintereinander auflisten. |
| playsinline | Aktivieren Sie diesen Parameter, dann können Sie Videos auf iOS-Geräten im Vollbildmodus abspielen lassen. |
| rel | Dieser Parameter kann die Werte 0 und 1 annehmen. Er aktiviert oder deaktiviert am Ende des Videos, dass ähnliche Inhalte vorgeschlagen werden. Tipp: Um zu verhindern, dass Videos von Wettbewerbern auf Ihrer Website präsentiert werden, sollten Sie den Parameter auf 0 setzen. |
| start | Ähnlich wie beim end-Parameter können Sie hiermit definieren, ab welcher Sekunde das Video starten soll. |
| showinfo | Möchten Sie den Videotitel im Player verstecken, dann können Sie diesen Parameter nutzen. |
Kann man YouTube-Videos responsive einbinden?
YouTube-Videos werden mit dem Embed Code standardmäßig mit fester Höhe und Breite in die Website integriert. Für mobiloptimierte Websites ist das ein Problem. Mit wenigen Handgriffen können Sie jedoch dafür sorgen, dass der YouTube-Player auf Ihrer Seite im responsiven Design erscheint.
Dazu müssen Sie einen div-container im CSS Ihrer Website definieren. Um das YouTube-Video entsprechend anzeigen zu lassen, müssen Sie den div-container anschließend nur noch um den iframe-Code legen. Das Ganze sieht schließlich wie folgt aus:
<div class="videoplayer">
<iframe class="youtubevideo" width="640" height="360"
src=" https://www.youtube.com/embed/wf2DjUMLV_Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<style>
.videoplayer {
background-color: orange;
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.youtubevideo {
background-color: yellow;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
Ist das Einbetten von YouTube-Videos erlaubt?
Grundsätzlich ja. Mit dem Inkrafttreten der Datenschutz-Grundverordnung (DSGVO) hat sich die Lage zum Einbinden von Google-Services wie YouTube-Videos auf Websites jedoch verändert. Denn sobald ein Video auf der Website gestartet wird, wird die IP-Adresse von den Nutzern und Nutzerinnen an Google weitergeleitet.
Deshalb müssen Websitebetreiber und -betreiberinnen unbedingt auf die rechtliche Lage in der Datenschutzerklärung verweisen und zusätzlich die Zustimmung von der Nutzerschaft einholen. In den YouTube-Optionen zum Einbetten sollte darüber hinaus der erweiterte Datenschutzmodus aktiviert werden.
YouTube-Videos einbetten: Welche Vorteile bieten eingebettete Videos?
Videoinhalte werden im Marketing immer wichtiger – so geben 92 Prozent der Marketer und Marketerinnen an, dass Videos ein wichtiger Teil ihrer Marketingstrategie sind. Ganz gleich, ob Sie einen Imagefilm, Produktvideos oder Behind-the-Scenes-Vlogs in Ihre Website integrieren wollen: Bewegtbildformate bieten den großen Vorteil, die Aufmerksamkeit der Nutzerschaft auf sich zu ziehen. Denn anders als bei langen Textwüsten muss sich der Besucher oder die Besucherin der Website bei Videos wenig anstrengen.
Eingebettete YouTube-Videos auf Websites können Ihnen daher dabei helfen:
- mehr Traffic zu generieren,
- die Verweildauer zu steigern,
- Leads zu gewinnen,
- Ihre Produkte und Services besser zu erklären,
- Verkäufe anzukurbeln,
- Supportanfragen zu minimieren.
Die vielfältigen Einsatzgebiete und Vorteile von Videoinhalten auf Websites zeigen, warum Sie wissen sollten, wie Sie ein YouTube-Video einbetten können.
Fazit: Mit großer Wirkung YouTube-Videos in Ihre Website einbinden
Um auf einer Website ein YouTube-Video einzubetten, sind nur wenige Handgriffe notwendig, die selbst ohne große Programmierkünste durchgeführt werden können. Alles, was Sie benötigen, ist der Embed Code und einen CSS-Schnipsel für das Responsive Design. Die Wirkung, die Sie mit den Bewegtbildformaten erzielen, ist hingegen enorm und verhilft Ihrer Website zu mehr Erfolg.
Titelbild: Tania Bondar / iStock / Getty Images Plus
