codepalm_videos

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: 100%;
	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() {
					_trigger = $( this ).parent();
					_trigger.hide();
					_wrapper.children( '.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

Abonniere die Fanpage von Codepalm und verpasse keine BeitrÀge mehr

Codepalm auf Facebook
 
 
 
 
Das könnte Dir gefallen:

Razer Thresher

EUR 169,99

Zu Amazon Mehr erfahren

Einstieg in Unity: 2D- und 3D-Programmierung

EUR 29,90

Zu Amazon Mehr erfahren

Fire Emblem Warriors

EUR 38,99

Zu Amazon Mehr erfahren

Kommentare

Sei der Erste, der einen Kommentar erstellt!

Schreibe einen Kommentar

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