</ YouTube Iframes – Erst Vorschaubild dann Iframe Laden - Dynamische größe >
Heute zeige ich Euch, wie Ihr erst Vorschaubilder laden lasst, und erst beim Klick auf das Vorschaubild das Iframe von YouTube ladet. Dies hat den Vorteil, dass die Ladezeiten der Webseite sinken. Ich habe im Code alles auskommentiert, damit Ihr versteht was ich da gemacht habe.
<style>/*.playbutton und .video style*/
.playbutton {width: 55px;height: 55px;background-image: url("http://besser-als-nix-ev.de/image/bp-play.png");background-size: cover;background-position:bottom;cursor: pointer;}
.playbutton:hover {background-image: url("http://besser-als-nix-ev.de/image/bp-play.png");background-position:top;}
.video {position: relative;background-size: cover;background-position: center center;}
.video,iframe{border:1px solid transparent;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
/*video id auslesen die hinter dem playbutton steht*/
var vid = $('.playbutton').attr('id');
/*Hintergundbild in div laden*/
$(".video").css("background-image","url(http://img.youtube.com/vi/"+ vid +"/hqdefault.jpg)");
/*höhe und breite aus class auslesen*/
var vwh = $(".video").attr('id');
/*id splitten und größen zuweisen*/
var arr = vwh.split(' ');
var width = arr[0];
$(".video").css("width",width);
var height = arr[1];
$(".video").css("height",height);
/*playbutton posizionieren*/
$('.playbutton').css("margin",height/3 +" auto");
/*Bei klick auf Play Hintergung löschen und iFrame laden*/
$('.playbutton').click(function(){
$(".video").css("background-image","none");
$('.playbutton').css("display","none");
var video = "<iframe width='" + width + "' height='" + height + "' src='https://www.youtube.com/embed/" + vid + "?wmode=transparent&rel=0&showinfo=0&autoplay=1' allowfullscreen></iframe>";
$(this).replaceWith(video);
});
});
</script>
<!--class ist die größe des div's und iFrame-->
<div class="video" id="250 150">
<!--id ist die Youtube-Video-ID-->
<div class="playbutton" id="83R6c1VVCwM"></div>
https://twus.info/232
