埋め込み動画が多すぎるため、ウェブサイトの読み込みが遅くなります

Question

埋め込み動画が多すぎるため、ウェブサイトの読み込みが遅くなります。私は、画像がある場所（ビデオが埋め込まれている場所の上にあるところ）を見て、それをクリックすると、埋め込まれたビデオがロードされます。誰かが私にこれを行う方法を考え出す助けを与えることができますか？たぶん、画像の上にカーソルを置くと、読み込まれたらYouTubeに埋め込まれますか？本当にありがとう！

Answer 1

ただ、画像上のユーザーがクリックした後、埋め込みコードを挿入するためのjQueryを使用します。

だけのサンプルコード：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'); 
}); 

あなたはビデオをしたい場合自動再生するには、URLの最後に?autoplay=1を追加してください。サムネイルなし

コード：

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

コード：http://jsfiddle.net/89uVe/4/

は、ビデオのサムネイルを抽出するには