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" NoCookie-Implementierung ist kein Garant f├╝r eine DSGVO-Konforme Einbindung der Videos. 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.

Wenn du deine Webseite nicht selbst entwickelt hast, empfehle ich dir den Einstieg in die Webseiten-Programmierung zu lernen, damit du f├╝r kleinere Programmier-Arbeiten keinen Web-Entwickler beauftragen musst.

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.

 

Das WordPress-Plugin Borlabs Cookie enth├Ąlt bereits eine 2-Klick-L├Âsung f├╝r YouTube. Die Installation und Konfiguration ist in sehr wenigen Schritten erledigt.
Solltest du auf deiner Webseite nur YouTube und keine anderen Drittanbieter-Cookies verwenden, empfehle ich die manuelle Integration der 2-Klick-L├Âsung.

Die HTML-Struktur der YouTube 2-Klick-L├Âsung

Die HTML-Struktur f├╝r diese YouTube-2-Klick-L├Âsung ist recht einfach. Dazu musst du keine Programmiersprache f├╝r Webseiten lernen. Ich lege dir aber an's Herz, dass du ein wenig HTML k├Ânnen solltest, da diese Auszeichnungssprache f├╝r alle Arbeitnehmer immer wichtiger wird.

F├╝r die Youtube 2-Klick-L├Âsung erstellst du zuerst 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 iFrame-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;
}

Dynamisches austauschen des YouTube-iFrames

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);

Den kompletten Code findest du auch auf Codepen:

See the Pen YouTube 2-Klick-L├Âsung by Codepalm (@Codepalm) on CodePen.

 

Du kannst deine YouTube-Videos mit jQuery automatisch anpassen, damit die Videos auch auf Smartphones optimal dargestellt werden!

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 mir einen Kommentar, ich helfe dir gerne weiter!

Der Code in Codepen wurde upgedated, um das automatische Resizing des YouTube-Videos zusammen mit der 2-Klick-L├Âsung zu vereinen. In einem kommenden Beitrag werde ich dir ganz genau zeigen, wie diese Kombination funktioniert. F├╝r alle, die diese Erkl├Ąrung nicht brauchen: Feel Free to Copy!

 

Codepalm
YouTube 2-Klick-L├Âsung