同じページの下にある「画像静止画」をクリックすると、ページ上部に10個の動画のうちの1つを表示したい

Question

「静止画像」をクリックして、同じページの下にさらに表示されます。理想的にはHTML5とCSSを使用したいが、必要に応じてjqueryを使用する。

Answer 1

アイデアはシンプルですが、あなたはそうのようなあなたのサイト上でYouTubeの動画を含めましょう...

<iframe src="http://www.youtube.com/embed/W7qWa52k-nE" width="560" height="315" frameborder="0" allowfullscreen></iframe> 

...そして、あなたもの場所が含まれていた画像のサムネイルの束を持っていましたブラウザが自動的に動画が更新されますので、そのデータ属性でのビデオ...

<img src="image1.jpg" data-video="jsd07sd"> 
<img src="image2.jpg" data-video="sjsfjs0"> 
<img src="image3.jpg" data-video="ajhash9"> 

は...その後、何残っていることは、これらの画像のクリックに対して耳を傾け、YouTubeのビデオの場所を変更することです新しい場所に...

$('img').on('click', function(){ 

    var newVideo = $(this).attr('data-video'); 

    $('iframe').attr('src', 'http://www.youtube.com/embed/' + newVideo); 

}); 

これは、何が起こる必要があるのか​​という一般的な概念です。