https://wiki.stephanschlegel.de/index.php?action=history&feed=atom&title=Datenschutz_-_youTube_2_Klick_L%C3%B6sung
Datenschutz - youTube 2 Klick Lösung - Versionsgeschichte
2026-05-09T05:52:11Z
Versionsgeschichte dieser Seite in Wikizone
MediaWiki 1.35.14
https://wiki.stephanschlegel.de/index.php?title=Datenschutz_-_youTube_2_Klick_L%C3%B6sung&diff=24062&oldid=prev
37.49.72.8: Die Seite wurde neu angelegt: „Beispiel von https://www.codepalm.de/post/youtube-2-klick-loesung/#die-html-struktur-der-youtube-2-klick-lsung HTML <syntaxhighlight lang="html5"> <!-- Mit d…“
2019-09-13T07:09:19Z
<p>Die Seite wurde neu angelegt: „Beispiel von https://www.codepalm.de/post/youtube-2-klick-loesung/#die-html-struktur-der-youtube-2-klick-lsung HTML <syntaxhighlight lang="html5"> <!-- Mit d…“</p>
<p><b>Neue Seite</b></p><div>Beispiel von<br />
https://www.codepalm.de/post/youtube-2-klick-loesung/#die-html-struktur-der-youtube-2-klick-lsung<br />
<br />
HTML<br />
<syntaxhighlight lang="html5"><br />
<!--<br />
Mit der 2-Klick-Lösung kannst du deinen Benutzern auf die Datenschutzbestimmungen hinweisen, bevor er ein YouTube-Video oder Google Maps ansieht. <br />
<br />
Die komplette Erklärung zum Skript findest du auf Codepalm: <br />
https://www.codepalm.de/post/youtube-2-klick-loesung/<br />
--><br />
<br />
<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' );"><br />
<div class="video_trigger" data-source="aqz-KE-bpKQ"><br />
<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><br />
<input type="button" class="btn" value="Akzeptieren" /><br />
</div><br />
<div class="video_layer"><iframe src="" border="0"></iframe></div><br />
</div><br />
</syntaxhighlight><br />
<br />
<syntaxhighlight lang="css"><br />
/* Video Wrapper */<br />
.video_wrapper {<br />
background-image: url( 'bg_image.jpg' );<br />
background-size: cover;<br />
position: relative;<br />
box-shadow: 0px 3px 5px #333;<br />
height: 400px;<br />
width: 100%;<br />
}<br />
.video_wrapper .video_trigger:before {<br />
content: '\f04b';<br />
font-family: 'FontAwesome';<br />
position: absolute;<br />
z-index: -1;<br />
font-size: 120px;<br />
color: rgba( 255, 255, 255, .2 );<br />
width: 120px;<br />
height: 120px;<br />
line-height: 120px;<br />
text-align: center;<br />
top: -webkit-calc( 50% - 60px );<br />
top: calc( 50% - 60px );<br />
left: -webkit-calc( 50% - 60px );<br />
left: calc( 50% - 60px );<br />
}<br />
.video_wrapper .video_trigger {<br />
padding: 130px 30px;<br />
<br />
height: -webkit-calc( 100% - 260px );<br />
height: -moz-calc( 100% - 260px );<br />
height: -o-calc( 100% - 260px );<br />
height: calc( 100% - 260px );<br />
<br />
width: -webkit-calc( 100% - 60px );<br />
width: -moz-calc( 100% - 60px );<br />
width: -o-calc( 100% - 60px );<br />
width: calc( 100% - 60px );<br />
<br />
position: absolute;<br />
bottom: 0;<br />
z-index: 9;<br />
background-color: rgba( 0, 0, 0, .8 );<br />
color: #fff;<br />
}<br />
.video_wrapper .video_layer {<br />
position: relative;<br />
display: none;<br />
height: inherit;<br />
width: inherit;<br />
margin: auto;<br />
}<br />
.video_wrapper .video_layer iframe {<br />
border: 0px none transparent;<br />
height: inherit;<br />
width: inherit;<br />
}<br />
<br />
/* Button */<br />
.btn {<br />
cursor: pointer;<br />
display: inline-block;<br />
transition: color .5s, background-color .5s, border .5s;<br />
padding: 8px 16px;<br />
font-size: 16px;<br />
border: 1px solid #ffffff;<br />
}<br />
.btn:hover {<br />
background-color: transparent;<br />
color: #ffffff;<br />
}<br />
</syntaxhighlight><br />
<br />
JavaScript (jQuery)<br />
<syntaxhighlight lang="javascript"><br />
(function($) {<br />
$( document ).ready( function() {<br />
if( $( '.video_wrapper' ).length > 0 ) {<br />
$( '.video_wrapper' ).each( function() {<br />
_wrapper = $( this );<br />
_wrapper.children( '.video_trigger' ).children( 'input[type="button"]' ).click( function() {<br />
var _trigger = $( this ).parent();<br />
_trigger.hide();<br />
_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' );<br />
});<br />
});<br />
}<br />
});<br />
})(jQuery);<br />
</syntaxhighlight></div>
37.49.72.8