JQueryを使ってYouTubeの表示/非表示を切り替えることができますが、再生を停止することはできません。

Question

jquery関数を使用して自分のサイトのYouTube動画要素を切り替えています。素晴らしい作品で、必要に応じて表示/非表示にします。しかし、私はdivを隠して再生ビデオを停止する方法を見つけることができません。私は要素を破棄してトグルでそれを呼び出すことについて読んでいますが、トグル関数内でどのように、そしてどこでそれを行うべきかを知るためのコードについては十分に分かりません。どんな助けも素晴らしいだろう。私は

あなたが使用することができ

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 

 .vidblock 
     { 
      background:#ccc; 
      width:430px; 
      height:320px; 
      display:none; 
     } 

    </style> 

    <script type="text/javascript"> 

     $(document).ready(function(){ 

      $('.toggle').click(function(){ 
       $('.vidblock').toggle("slow"); 
      }); 

     }); 

    </script> 

と

<h3><a href="#" class="toggle">Click to view a video of how and where to enter <?=$merch_array['Name']?> <?=$merch_array['Term_Used']?>s</a></h3> 

Answer 1

以下の私のコードを追加した 'detach' -

を

$(function() { 
    var savedNodes; 

    $('.toggle').toggle(function() { 
     $('.vidblock').hide('slow', function() { 
      savedNodes = $('yourplayerid').detach(); 
     }); 
    }, function() { 
     $('.vidblock').append(savedNodes) 
     $('.vidblock').show('slow'); 
    }); 

}); 

デモ - http://jsfiddle.net/Sf4LT/2/

Answer 2

あなただけのビデオを一時停止または停止するのYouTubeのJavaScript API（http://code.google.com/apis/youtube/js_api_reference.html）を使用して、要素を破壊する必要はありません。

オブジェクトにplayerapiidを指定した場合、JavaScriptでターゲットを設定できます。

Answer 3

大丈夫です！これは私が理解するのに少し時間がかかりました、そして、私があなたに言うとき、それは理にかなっています。

あなたはユーチューブのAPIを呼び出していることを確認してください：

<script type="text/javascript" src="http://www.youtube.com/player_api"></script> 

あなたのdivを隠し、使用jQueryの自動再生を使用せずに、同じビデオにビデオのソースを変更します。これにより、ビデオの再生が停止され、ビデオのバックアップが設定されます。

私が見つけた別のクールなものは、私のdivを開くときに、私は自動再生でそれをオンにしています。

あなたがこのページでデモを見ることができます：プレイリンクにhttp://advantageanywhere.com/index.aspx?sid=250 クリックして、あなたが、やって示すとdiv要素を隠しているものと同様の（ライトボックスを開くために起こっていることの本来の状態では、私はそれがそこに座っています。通常の埋め込みリンクとして隠れている間にクリックされると自動再生に変わり、エスケープやXをクリックするとライトボックスが閉じて通常の埋め込みに戻ります（再生を停止します）。

We 元の埋め込み動画は[jpnyoutubeをjqueryのターゲットに追加し、youtube api（?enablejsapi=1）のパラメータを追加する]：

これは、画像を隠しdivで開始する方法です。

div要素が開かれると、これはあなたが必要とjQueryのです：div要素が隠されているとき

$('#youtube').attr("src", "http://www.youtube.com/embed/AAbOWbquDWU?enablejsapi=1&autoplay=1"); /* starts youtube video after lightbox opens */ 

は今、これはあなたが必要とjQueryのです：

以下

$('#youtube').attr("src", "http://www.youtube.com/embed/AAbOWbquDWU?enablejsapi=1"); /* stops video from playing on youtube after hiding div */ 

は全体でスクリプト私はセットアップがあります。私はあなたのためにこれを一緒に投げつけようとしましたが、今は時間がありませんし、締め切りを迫っているときにあなたの質問に遭遇しました。

他にご質問がございましたら、お手数ですがお手数ですが、

$(window).load(function(){ 
    var KEYCODE_ESC = 27; 
    $(document).keyup(function(e) { 
     if (e.keyCode == KEYCODE_ESC) { closeLightBox(); } 
    }); 

    function closeLightBox() { 
     $("#lb1, #lb4").fadeOut(); 
     $("#featureContent, #videoContent").hide(); 
     $('#youtube').attr("src", "http://www.youtube.com/embed/clJe9U38ids?enablejsapi=1"); /* stops video from playing on youtube after hiding div */ 
    }   
    /* ------------ Light Box 4 Video ------------- */ 

    var lightBox4 = $('#lb4'), 
    videoContent = $('#videoContent'); 

    $('#anywhereVideo').click(function() { 
     lightBox4.fadeIn(function() { 
      videoContent.show(); 
       $('#youtube').attr("src", "http://www.youtube.com/embed/clJe9U38ids?enablejsapi=1&autoplay=1"); /* starts youtube video after lightbox opens */ 

     }); 

    }); 


    $('#close4').click(function() { 
     closeLightBox(); 

    }); 
    });