Datenschutz - youTube 2 Klick Lösung

Beispiel von

https://www.codepalm.de/post/youtube-2-klick-loesung/#die-html-struktur-der-youtube-2-klick-lsung

HTML

<!--
Mit der 2-Klick-Lösung kannst du deinen Benutzern auf die Datenschutzbestimmungen hinweisen, bevor er ein YouTube-Video oder Google Maps ansieht. 

Die komplette Erklärung zum Skript findest du auf Codepalm: 
https://www.codepalm.de/post/youtube-2-klick-loesung/
-->

<div class="video_wrapper" style="background-image: url( 'https://images.unsplash.com/photo-1483959651481-dc75b89291f1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' );">
	<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" value="Akzeptieren" />
	</div>
	<div class="video_layer"><iframe src="" border="0"></iframe></div>
</div>

/* Video Wrapper */
.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, .8 );
	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;
}

/* Button */
.btn {
  cursor: pointer;
  display: inline-block;
  transition: color .5s, background-color .5s, border .5s;
  padding: 8px 16px;
  font-size: 16px;
  border: 1px solid #ffffff;
}
.btn:hover {
  background-color: transparent;
  color: #ffffff;
}

JavaScript (jQuery)

(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&mute=1' );
				});
			});
		}
	});
})(jQuery);