Meine Website lädt langsam wegen zu vielen eingebetteten Videos

Question

Meine Website lädt langsam wegen zu vielen eingebetteten Videos. Ich sehe, wo ein Bild ist (über dem, wo das Video eingebettet ist), und Sie klicken darauf, an dem das eingebettete Video geladen wird. Könnte mir jemand helfen, herauszufinden, wie das geht? Vielleicht, sobald Sie den Mauszeiger über das Bild halten, das der Youtube eingebettet hat, wenn er geladen ist? Vielen Dank!

Answer 1

Gerade jQuery verwenden Sie den Code einbetten einzufügen, nachdem der Benutzer auf das Bild klickt:

Nur Beispielcode HTML

<div id="video" style="background-color:red; width:560px; height:315px;"></div> 

jQuery:

$('#video').on('click', function() { 
    $(this).html('<iframe width="560" height="315" src="//www.youtube.com/embed/9bZkp7q19f0?autoplay=1" frameborder="0" allowfullscreen></iframe>').css('background', 'none'); 
}); 

Wenn Sie das Video wollen Autoplay hinzufügen ?autoplay=1 bis zum Ende der URL wie ich es getan habe.

-Code ohne Miniaturbild: http://jsfiddle.net/KFcRJ/

video thumbnail So zu extrahieren:

HTML:

<div id="video" style="background-color:red; width:560px; height:315px;"> 
<a href="http://www.youtube.com/watch?v=9bZkp7q19f0" class="youtube"></a></div> 

jQuery:

$('#video').on('click', function() { 
$(this).html('<iframe width="560" height="315" src="//www.youtube.com/embed/9bZkp7q19f0?autoplay=1" frameborder="0" allowfullscreen></iframe>').css('background', 'none'); 
}); 

function getYoutubeID(url) { 
    var id = url.match("[\\?&]v=([^&#]*)"); 
    id = id[1]; 
    return id; 
}; 
$('a.youtube').each(function() { 
    var id = getYoutubeID(this.href); 
    this.id = id; 
    var thumb_url = "http://img.youtube.com/vi/"+id+"/maxresdefault.jpg"; 
    $('<img width="100%" src="'+thumb_url+'" />').appendTo($('#video')); 
}); 

Code mit Miniaturbild: http://jsfiddle.net/89uVe/4/