Youtube Video Einbindung leicht gemacht - Tipps zum Einfügen auf Websites (2024)

×

  • 0821 / 999 530
  • info@mxp.de
  • Support
  • Blog

  • 10.05.2017
  • Digital
  • von Saskia Kubitschek

Youtube Video Einbindung leicht gemacht - Tipps zum Einfügen auf Websites (2)

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, dieWebsite 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.

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 Video Einbindung leicht gemacht - Tipps zum Einfügen auf Websites (4)

So kommst du zu dem Embed Code deines Youtube Videos.

Youtube Video Einbindung leicht gemacht - Tipps zum Einfügen auf Websites (5)

Per Klick kannst du einige Einstellungen schon direkt in Youtube vornehmen.

Youtube Video Einbindung leicht gemacht - Tipps zum Einfügen auf Websites (6)

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.

[table “” not found /]

Hier kannst du 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.

Kommentare (6)

  • 1 Jahr Reply

    Toll beschrieben, aber welchen Code muss ich ändern, das am Ende des Videos nicht einfach weitere Videos starten, oder habe ich das überlesen?
    Danke vielmals

    • 1 Jahr Reply

      Danke für Deinen Kommentar. Wir freuen uns, dass wir mit dem Artikel weiter helfen konnten. Die Einstellung für die automatische Wiedergabe ähnlicher Videos ist unter dem Code Parameter „rel“.
      Wenn Du die Standardeinstellung von 1 auf 0 änderst, stoppt das Video nach der Wiedergabe. Viele Grüße

  • 1 Jahr Reply

    Tausend Dank für diese Schulung. Sie haben mein großes Vorhaben gerettet um eine Playliste in die Onlinezeitung von mir als Onlinefernsehen zu veröffentlichen.

    Vielen lieben Dank.

    Wenn ich Ihnen irgendwie meinen Dank ausdrücken kann so sagen Sie es mir.

    Ob mit PayPal als Unterstützung oder mit Weiterempfelung.

    Ihr Oliver Döll von http://www.tvueberregional.de

  • 2 Jahre Reply

    Kurz vor Verzweiflung fand ich diesen Beitrag und danke für die Infos – damit konnte ich als Youtube-Neuling meinem Kunden seinen Tag retten!

    • 2 Jahre Reply

      Es freut uns, dass wir Dir helfen konnten!

  • 3 Jahre Reply

    Super hilfreiche Infos. Sehr empfehlenswerte Seite. Danke!

Das könnte dich auch interessieren

Digital

Agiles Marketing

Agiles Marketing bietet durch iterative Prozesse und Feedbackschleifen eine flexible Herangehensweise, die es ermöglicht, schnell auf Marktveränderungen zu reagieren und die Marketingstrategie entsprechend anzupassen. Durch agiles Marketing, entsteht automatisch auch gleich ein kontinuierliches Onlinemarketing. Doch wieso ist das von Vorteil?

Digital

Barrierefreie Website: Pflicht ab 2025

Barrierefreies Webdesign ermöglicht es allen Menschen, unabhängig von ihren körperlichen oder sensorischen Einschränkungen, auf Informationen und Services im Internet zuzugreifen. In diesem Beitrag erfährst du, was zum Thema barrierefreie Website zu beachten ist.

Digital

Effektives Online-Marketing: Strategien, die den Unterschied ausmachen

In der heutigen digitalen Ära ist effektives Online-Marketing entscheidend für den Erfolg von Unternehmen jeder Größe. Die Herausforderung besteht jedoch darin, herauszufinden, welche Strategien wirklich den entscheidenden Unterschied ausmachen.

Digital

Cloud-native-Computing: Der moderne Weg, Software zu entwickeln

Was haben die Unternehmen Netflix, Spotify, Uber und Airbnb gemeinsam? Richtig: Alle sind sehr erfolgreich und „in der Cloud geboren“. Der sogenannte Cloud-native-Ansatz verbreitet sich im Bereich der Softwareentwicklung immer weiter. Mehr dazu findest du in diesem Beitrag.

Youtube Video Einbindung leicht gemacht - Tipps zum Einfügen auf Websites (2024)
Top Articles
Latest Posts
Article information

Author: Wyatt Volkman LLD

Last Updated:

Views: 5923

Rating: 4.6 / 5 (66 voted)

Reviews: 89% of readers found this page helpful

Author information

Name: Wyatt Volkman LLD

Birthday: 1992-02-16

Address: Suite 851 78549 Lubowitz Well, Wardside, TX 98080-8615

Phone: +67618977178100

Job: Manufacturing Director

Hobby: Running, Mountaineering, Inline skating, Writing, Baton twirling, Computer programming, Stone skipping

Introduction: My name is Wyatt Volkman LLD, I am a handsome, rich, comfortable, lively, zealous, graceful, gifted person who loves writing and wants to share my knowledge and understanding with you.