JavaScriptで表示/非表示 - YouTubeのiframe動画の再生を停止する

Question

私はiframe関数を使用して動画を埋め込みましたが、JavaScriptを使用してコンテンツと動画を隠しています。

私はを1つ持っています。という問題があります。私が最初のビデオを再生し、最初のビデオを止めずに次のビデオをクリックすると、最初のビデオだけが再生を続けます。

新しいコンテンツを表示するときに、「背景」で動画を停止するにはどうすればよいですか？私は「PIC1」と「PIC2」idはdiv要素のIDで、ビデオが中に埋め込まれているこの単純なJavaScript関数を、使用しています。

を私はちょうど見えることはできません

$(function(){ 
    $("#link1").click(show1); 
}); 

function show1(){ 
    $("#pic1").fadeIn(); 
    $("#pic2").hide(); 
} 

それを機能させる。私は削除をしようとしましたが、あなたがしたい場合は、再度ビデオを見ることができません。

Answer 1

これは、追加のファイルを読み込まずにYouTubeプレーヤーAPIの実装です。この作業を行うには、のsrc属性の末尾に?enablejsapi=1という接尾辞を付ける必要があります。

例（私は読みやすくするためにいくつかの行を超えるコードを壊し、あなたが安全に改行を省略することができます）：

<div id="pic3"> 
    <iframe width="640" height="390" 
      src="http://www.youtube.com/embed/Xub4grFLbQM?enablejsapi=1" 
      frameborder="0" allowfullscreen></iframe> 
</div> 

<div id="tS2" class="jThumbnailScroller"> 
.. Removed your code for readability.... 
    <a href="#vid3" id="link3"><img src="images/thumbs/player2.jpg" height="85"/></a> 
    .... 

のJavaScript + jQueryのコード：

$(function() { 
    /* elt: Optionally, a HTMLIFrameElement. This frame's video will be played, 
    *  if possible. Other videos will be paused*/ 
    function playVideoAndPauseOthers(frame) { 
     $('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) { 
      var func = this === frame ? 'playVideo' : 'pauseVideo'; 
      this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*'); 
     }); 
    } 
    $('#tS2 a[href^="#vid"]').click(function() { 
     var frameId = /#vid(\d+)/.exec($(this).attr('href')); 
     if (frameId !== null) { 
      frameId = frameId[1]; // Get frameId 
      playVideoAndPauseOthers($('#pic' + frameId + ' iframe')[0]); 
     } 
    }); 
});