Trang web của tôi tải chậm do có quá nhiều video được nhúng

Question

Trang web của tôi tải chậm do có quá nhiều video được nhúng. Tôi nhìn thấy nơi có một hình ảnh (overtop của nơi video được nhúng) và bạn nhấp vào nó, tại thời điểm đó, video nhúng được tải. Bất cứ ai có thể cho tôi một số trợ giúp tìm ra cách để làm điều này? Có lẽ một khi bạn di chuột qua ảnh youtube nhúng nếu được tải? Cám ơn rất nhiều!

Answer 1

Chỉ cần sử dụng jQuery để chèn mã nhúng sau khi người dùng nhấp chuột vào hình ảnh:

Chỉ cần mẫu mã: 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'); 
}); 

Nếu bạn muốn video để tự động phát thêm ?autoplay=1 vào cuối url như tôi đã làm.

Mã mà không thu nhỏ: http://jsfiddle.net/KFcRJ/

Để trích xuất phim thumbnail:

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')); 
}); 

Mã với thumbnail: http://jsfiddle.net/89uVe/4/