Tutorial: YouTube Video responsive einbinden
Schritt-für-Schritt-Anleitung: Wie du YouTube-Videos in deine Website responsive einbinden und für Handys optimieren kannst
Das Einbetten von responsive YouTube-Videos auf deiner Website kann deine Inhalte deutlich aufwerten und interaktiver machen. In diesem Artikel führe ich dich durch den Prozess des Einbettens eines responsive YouTube-Videos auf deiner Website und zeige dir, wie du es optimal für mobile Geräte gestalten kannst.
Inhaltsverzeichnis
YouTube Video einbinden
1. Schritt: Gehe auf youtube.de
Zuerst musst du dir ein Video auf YouTube aussuchen.
2. Schritt: [Teilen] drücken
Hast du es gefunden, klickst du unter dem Video auf den „Teilen„-Button.
3. Schritt: [Einbetten] drücken
Im nächsten Schritt siehst du eine Auswahl an Optionen – wähle hier „Einbetten“ aus. Daraufhin wird ein Textfeld mit einem Code angezeigt. Dieser Code ermöglicht es dir, das Video auf deiner Website einzubinden.
4. Schritt: Erweiterten Datenschutzmodus aktivieren
Jetzt wurde deinem Code hinter ‚youtube‘ noch ‚-nocookie‘ gesetzt. Das verhindert, dass YouTube Daten über die Nutzer meiner Webseitenbesucher erhebt – bis auf das Video geklickt wird!
5. Schritt: <iframe> in Webseite kopieren
Der Code mit erweiterter Datenschutzbestimmung sieht in etwa so aus:
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/9YffrCViTVk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Diesen Code kopierst du und fügst ihn als HTML-Code an der Stelle auf deiner Website ein, an der das Video erscheinen soll.
6. Schritt: Video für mobile Endgeräte optimieren
Nachdem du das Video eingebettet hast, solltest du sicherstellen, dass es auch auf mobilen Geräten optimal dargestellt wird. Dafür setzt du einen div-Container um das iframe. Dieser div-Container sollte eine Klasse haben, auf die wir später in unserem CSS zurückgreifen können.
Die Umsetzung sollte wie folgt aussehen:
<div class="responsiveyoutube"> </div>
7. Schritt: CSS anpassen
Nachdem du den Container mit der Klasse responsive-video erstellt hast, ist es an der Zeit, das CSS anzupassen. Hier sind die beiden benötigten Definitionen:
.responsiveyoutube { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .responsiveyoutube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
8. Schritt: 16:9 aspect ratio
Wenn du die Größe des Videos weiter anpassen möchtest, ändere einfach den padding-bottom Wert. Die 56,25 % stellen ungefähr das 16:9-Format dar. Probiere mal verschiedene Werte aus, um die beste Passform für deine Website zu finden. Und übrigens, du kannst natürlich auch den Namen: „responsiveyoutube“ von mir ändern.
Mit diesen Schritten wird dein YouTube Video responsive eingebunden und kann auf mobilen Endgeräten optimal dargestellt werden. Die Größe des Videos passt sich der Breite 100% des Devices an.
Beispiel: Eingebundenes YouTube Video
<div class="responsiveyoutube"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XGP0-npJdHw?si=A4gu1iE1YWPjzHV8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>Datenschutzkonform einbinden – wieso?
Die Einbindung von YouTube-Videos auf einer Website kann Datenschutzfragen aufwerfen, da YouTube (ein Dienst von Google) beim Laden eines Videos Daten des Website-Besuchers erfasst. Dies kann ein Problem in Bezug auf die Datenschutz-Grundverordnung (DSGVO) in der Europäischen Union darstellen. Hier sind jedoch einige Schritte, die du unternehmen kannst, um YouTube-Videos DSGVO-konform auf deiner Website einzubinden:
Zwei-Klick-Lösung oder Cookie-Consent-Lösung
Eine andere Methode ist die sogenannte „Zwei-Klick-Lösung„. Dabei wird das Video erst geladen, nachdem der Nutzer aktiv auf einen Button geklickt hat. Mit dem ersten Klick auf diesen Button gibt der Nutzer seine Einwilligung zur Datenübertragung an YouTube.
Es gibt dazu verschiedene Drittanbieter-Tools und -Plugins, die eine solche Funktionalität bereitstellen können. Ein bekanntes aber kostenpflichtiges Beispiel ist das Borlabs Cookie, das eine Cookie-Einwilligungslösung anbietet. Es zeigt einen Platzhalter an, bis der Nutzer die Cookies akzeptiert hat, und erst dann wird das YouTube-Video geladen.
Datenschutzerklärung und Informationspflicht
Stelle sicher, dass du eine klare und leicht zugängliche Datenschutzerklärung auf deiner Website hast, die erklärt, wie und warum Daten von Nutzern gesammelt werden, einschließlich der Tatsache, dass eingebettete YouTube-Videos Daten an YouTube senden. Dies ist ein zentraler Aspekt der DSGVO: die Transparenz gegenüber den Nutzern hinsichtlich der Verwendung ihrer Daten.
Prüfen von YouTube-Videos auf Drittanbieter-Tracker
Einige YouTube-Videos können Tracker von Drittanbietern enthalten. Diese können oft nur schwer identifiziert werden, aber es gibt Tools und Browser-Erweiterungen, die sie erkennen können. Du solltest sicherstellen, dass die Videos, die du einbettest, keine solchen Tracker enthalten, da diese gegen die DSGVO verstoßen können.
Diese Schritte helfen dabei, YouTube-Videos in einer Weise in deine Website einzubinden, die die DSGVO beachtet. Dennoch ist es wichtig, dass du dich mit einem Rechtsberater berätst, um sicherzustellen, dass du alle Aspekte der DSGVO einhältst, da diese Erklärung keine rechtsverbindliche Beratung darstellt.
