YouTube 2-Klick-Lösung

YouTube 2-Klick-Lösung

 

Eine 2-Klick-Lösung für Webseiten mit YouTube-Videos erstellen

 

YouTube-Videos werden für Webseiten-Betreiber immer wichtiger, da der geschriebene Text für Personen visuell Strukturiert aufbereitet und somit eine breitere Zielgruppe angesprochen werden kann.

Seit diesem Jahr sollten Entwickler dank der DSGVO einige Anpassungen an Ihrer Webseite vorgenommen haben, um nicht in die Abmahn-Falle zu gelangen. Ein großer Punkt ist die Integration von Google-Services die nur noch teilweise oder gar nicht mehr verwendet werden dürfen. Da YouTube zur Google-Familie gehört und dadurch Benutzer-Daten ungefragt an Europa-Fremde Server übertragen werden, sollten nur noch wenige Webseiten mit einer Video-Anbindung zum Streaming-Giganten existieren.

Auch die sogenannte "Datenschutzkonforme" iFrame-Implementierung ist kein Garant für eine Abmahn-Sicherheit. Denn es werden weiterhin Daten des Benutzers übertragen. Bei diesem Verfahren wird lediglich die Verwendung von Cookies unterbunden.

YouTube Erweiterter Datenschutz

 

Damit Du trotzdem YouTube-Videos ausspielen darfst musst Du die explizite Zustimmung der Datenübertragung vom Benutzer einholen. Das kann durch einen Klick auf eine Schaltfläche geschehen, die unter einem entsprechenden Hinweistext platziert wird. Zudem sollte ein Link zu Deiner Datenschutz-Seite platziert werden, der mit einem Klick in einem neuen Reiter geöffnet wird.

 

Mit dem Aufruf des Videos erklärst Du Dich einverstanden, dass Deine Daten an YouTube übermittelt werden und das Du die Datenschutzerklärung gelesen hast.

 

Die HTML-Struktur des Videos

Die HTML-Struktur für diese YouTube-2-Klick-Lösung ist recht einfach.

Zuerst erstellst Du ein umschließendes Element das Du mit einem JavaScript selektieren kannst. In diesem Wrapper integrierst Du alle notwendigen Informationen, wie einen Hinweistext, ein schönes Hintergrundbild und einen Button "Akzeptieren".

Zudem platzierst Du im "video_trigger"-Element die YouTube-ID, die mit JavaScript zum src-Attribut des iFrames Deines Videos eingefügt wird. Das iFrame hat die Angewohnheit neu zu laden, sobald das Attribut src geändert wird. Somit musst Du Dich nicht mehr um einen Reload des Elements kümmern.

<div class="video_wrapper" style="background-image: url( 'bg_image.jpg' );">
	<div class="video_trigger" data-source="aqz-KE-bpKQ">
		<p class="text-center">Mit dem Aufruf des Videos erklärst Du Dich einverstanden, dass Deine Daten an YouTube übermittelt werden und das Du die <a href="/datenschutz/" target="_blank">Datenschutzerklärung</a> gelesen hast.</p>
		<input type="button" class="btn btn-small btn-white btn-transparent" value="Akzeptieren" />
	</div>
	<div class="video_layer"><iframe src="" border="0"></iframe></div>
</div>
 

Formatieren des Elements mit CSS

Mit den CSS-Formatierungen kannst Du natürlich nach Belieben spielen. Ich verwende in meinem Format ein Hintergrund-Bild, das ich per Inline-Style überschreiben kann. Dadurch kann ich für jedes Video ein individuelles Vorschau-Bild setzen. Alternativ kann ich den Inline-Style weglassen und verwende dadurch automatisch das vordefinierte Bild, das in unserer CSS-Klasse gesetzt wird.

Durch die Standard-Klassen von Codepalm kann ich den Button auf dem YouTube-Element an das Design unserer Webseite anpassen. Du kannst gerne Deine eigenen Formatierungen für den Button verwenden.

Mit dem Pseudo-Element ":before" platziere ich hinter den Text, bzw. vor dem Hintergrund ein "Play"-Icon mit einer halb-transparenten Farbe. Wenn Du dieses Icon verwenden möchtest musst Du sicherstellen, dass Du FontAwesome auf Deiner Webseite integriert hast. Hier kannst Du natürlich auch ein Hintergrund-Bild oder Icons aus einer anderen Bibliothek setzen.

.video_wrapper {
	background-image: url( 'bg_image.jpg' );
	background-size: cover;
	position: relative;
	box-shadow: 0px 3px 5px #333;
	height: 400px;
	width: 100%;
}
.video_wrapper .video_trigger:before {
	content: '\f04b';
	font-family: 'FontAwesome';
	position: absolute;
	z-index: -1;
	font-size: 120px;
	color: rgba( 255, 255, 255, .2 );
	width: 120px;
	height: 120px;
	line-height: 120px;
	text-align: center;
	top: -webkit-calc( 50% - 60px );
	top: calc( 50% - 60px );
	left: -webkit-calc( 50% - 60px );
	left: calc( 50% - 60px );
}
.video_wrapper .video_trigger {
	padding: 130px 30px;
	
	height: -webkit-calc( 100% - 260px );
	height: -moz-calc( 100% - 260px );
	height: -o-calc( 100% - 260px );
	height: calc( 100% - 260px );
	
	width: -webkit-calc( 100% - 60px );
	width: -moz-calc( 100% - 60px );
	width: -o-calc( 100% - 60px );
	width: calc( 100% - 60px );
	
	position: absolute;
	bottom: 0;
	z-index: 9;
	background-color: rgba( 0, 0, 0, .6 );
	color: #fff;
}
.video_wrapper .video_layer {
	position: relative;
	display: none;
	height: inherit;
	width: inherit;
	margin: auto;
}
.video_wrapper .video_layer iframe {
	border: 0px none transparent;
	height: inherit;
	width: inherit;
}
 
 

Die Dynamik mit JavaScript erstellen

Das Kernstück ist das JavaScript. Durch die Verwendung der jQuery-Funktion ".click()" kannst Du per Algorithmus verfolgen, ob der Benutzer auf den Button "Akzeptieren" geklickt hat. Nach diesem Klick soll der Hinweistext mit Button verschwinden und dafür das iFrame geladen werden.

Stelle sicher, dass Du jQuery auf Deiner Webseite eingebunden hast. Der Code-Schnipsel funktioniert nur mit dieser JavaScript-Bibliothek.

Durch den Parameter "autoplay=1" im YouTube-Link wird das Video gestartet, sobald es geladen wird. Nach dem Ende des Videos werden normalerweise weitere ähnliche Videos von YouTube vorgeschlagen. Um die Vorschläge auszublenden kannst Du den Parameter "rel=0" setzen. Ich habe mich zudem dafür entschieden die Kontrollelemente des Videos zu verstecken. Das geschieht durch den Parameter "controls=0" und "showinfo=0". Du kannst für Dich selbst entscheiden, ob die Kontrollleiste ausgestrahlt werden soll oder nicht.

(function($) {
	$( document ).ready( function() {
		if( $( '.video_wrapper' ).length > 0 ) {
			$( '.video_wrapper' ).each( function() {
				_wrapper = $( this );
				_wrapper.children( '.video_trigger' ).children( 'input[type="button"]' ).click( function() {
					var _trigger = $( this ).parent();
					_trigger.hide();
					_trigger.siblings( '.video_layer' ).show().children( 'iframe' ).attr( 'src', 'https://www.youtube-nocookie.com/embed/' + _trigger.attr( 'data-source' ) + '?rel=0&controls=0&showinfo=0&autoplay=1' );
				});
			});
		}
	});
})(jQuery);
 

Wenn Du den CSS- und JavaScript-Code global auf Deiner Webseite einbindest, kannst Du an jeder beliebigen Stelle das HTML-Gerüst mit unterschiedlichen YouTube-ID's platzieren.

Du hast Fragen oder Anmerkungen? Hinterlasse uns einen Kommentar, wir helfen Dir gerne weiter!

 

Codepalm
YouTube 2-Klick-Lösung
 

Das konnte dich auch interessieren

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

 

Kommentare

Dennis
Dennis
Hallo, kurze Frage: wenn ich mehrere Videos auf einer Seite platzieren möchte, dann funktioniert das Script nicht korrekt. Was muss ich editieren? Die Videos einzeln ansprechen? Dank und Gruß
Kommentar von Günter K. am 29.04.2019 07:42:10

Hallo Günter,

vielen Dank für den Hinweis!
Ich habe das jQuery-Script erweitert. Mit dem Update können nun mehr als ein Video mit dem Datenschutz-Hinweis platziert werden.

Hier kommst du direkt zum Skript: Dynamik mit JavaScript erstellen

Happy Coding,
Dennis
am 30.04.2019 12:49:26
Günter K.
Günter K.
Hallo, kurze Frage:
wenn ich mehrere Videos auf einer Seite platzieren möchte, dann funktioniert das Script nicht korrekt. Was muss ich editieren? Die Videos einzeln ansprechen?

Dank und Gruß
am 29.04.2019 07:42:10
Dennis
Dennis
Hallo, genau sowas habe ich gesucht! Gibt es die möglichkeit das fertige Script herunterzuladen? So peile ich das nicht! Vielen Dank
Kommentar von Thomas am 23.03.2019 13:54:22

Hallo Thomas,
die Kollegen von SelfHTML.org haben eine sehr gut dokumentierte Webseite, auf der du lernst, wie du JavaScripts und CSS auf deine HTML-Webseite hinzufügen kannst.
Je nach CMS kann die Einbindung von Skripten und Formatierungen variieren. Bei WordPress-Webseiten musst du beispielsweise den wp_enqueue_scripts Filter verwenden.

Schau doch mal in meinen Beitrag Programmiersprachen für Webseiten lernen vorbei. Das ist eine Ansammlung an Informationsquellen, für den Eintieg in die Programmierung.
Falls du kein Interesse am Programmieren hast, empfehle ich dir einen Webentwickler damit zu beauftragen den JavaScript- und CSS-Code einzufügen. Ein guter Programmierer bekommt sowas in kürzester Zeit hin 🙂

Happy Coding,
Dennis
am 25.03.2019 10:51:58
Dennis
Dennis
Hallo, wie kann ich 'allowfullscreen' aktivieren? Besten dank
Kommentar von Anthony Bury am 23.03.2019 10:28:35

Hallo Anthony,
der "allowfullscreen" wird automatisch deaktiviert, wenn die Kontroll-Elemente des YouTube-Videos ausgeschaltet werden.
Um die Kontroll-Elemente des Videos zu aktivieren musst du nur in der Zeile 9 des JavaScripts den Parameter "controls" auf "1" setzen, oder den Parameter entfernen.

Die Parameter sehen dann so aus: '?rel=0&showinfo=0&autoplay=1'

Der Vollbild-Modus kann aber auch ohne die Kontroll-Elemente gestartet werden, wenn das Video mit einem Doppelklick betätigt wird.

Happy Coding,
Dennis
am 25.03.2019 10:51:36
Thomas
Thomas
Hallo,
genau sowas habe ich gesucht!
Gibt es die möglichkeit das fertige Script herunterzuladen? So peile ich das nicht!

Vielen Dank
am 23.03.2019 13:54:22
Anthony Bury
Anthony Bury
Hallo,
wie kann ich 'allowfullscreen' aktivieren?
Besten dank
am 23.03.2019 10:28:35
Dennis
Dennis
Danke so etwas habe ich gesucht! :D Das Ganze funktioniert einwandfrei in Firefox, aber in Chrome leider nicht. Gibt es dort vielleicht eine Lösung? Freue mich auf Feedback :)
Kommentar von Mpunkt am 04.12.2018 19:20:54

Hallo Mpunkt,
vielen Dank für den Hinweis!

Das Problem lag an den Absolut-Positionierten Elementen und der Kombination aus Padding und der 100%igen Höhe.
Ich habe die CSS-Klasse ".video_wrapper .video_trigger" so bearbeitet, dass es nun in allen Browsern ohne Probleme funktionieren sollte. Das habe ich geschafft, indem ich 100% der Höhe und Breite abzüglich des Paddings gesetzt habe.

Alternativ kann man in dieser Klasse den Eigenschaften "bottom", "top", "left" und "right" jeweils den Wert "0" geben.

Happy Coding, Dennis
am 05.12.2018 10:09:37
Mpunkt
Mpunkt
Danke so etwas habe ich gesucht! 😁

Das Ganze funktioniert einwandfrei in Firefox, aber in Chrome leider nicht.
Gibt es dort vielleicht eine Lösung?

Freue mich auf Feedback 🙂
am 04.12.2018 19:20:54
 
Secured By miniOrange