web-dev-qa-db-ja.com

Twitter Bootstrap Modal stop Youtube video

私はjavascriptが初めてで、Twitter bootstrapを使用して見栄えの良いWebサイトを迅速に立ち上げて実行しようとしています。これはjqueryと関係があることがわかりますが、閉じるボタンまたは閉じるアイコンを押したときにビデオを停止します。

ウィンドウを閉じてもバックグラウンドで聞こえるので、誰かがビデオの再生を停止する方法を説明できますか。

<!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal"><img src="img/play.png"></a>

<!-- Modal -->
  <div id="myModal" class="modal hide fade" tabindex="-1" role=labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria>×</button>
      <h3 id="myModalLabel">I am the header</h3>
    </div>
    <div class="modal-body">
      <p><iframe width="100%" height="315" src="http:com/embed/662KGcqjT5Q" frameborder="0" allowfullscreen></iframe></p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
javascriptjquerytwitter-bootstrapyoutube
37
catchmikey

これを行うには適切な方法があります- this post に対する承認済みの回答のコメントを参照してください。

しかし、自分自身で最初に動作することはできませんでしたし、ラッシュにいたので、私はトリックを行うかなり恐ろしいハックなコードをしました。

このスニペットは、埋め込まれたiframeのsrcを「更新」し、リロードを引き起こします。

jQuery(".modal-backdrop, #myModal .close, #myModal .btn").live("click", function() {
        jQuery("#myModal iframe").attr("src", jQuery("#myModal iframe").attr("src"));
});
34
RobCalvert123

私は2年以上遅れていますが、それ以来、いくつかのことが変わりました。B3では、これをすぐに実行する新しい方法は次のとおりです。

$("#myModal").on('hidden.bs.modal', function (e) {
    $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});

Bootstrapをお楽しみください！

73
gmslzr

それでも誰かに問題がある場合は、これを試してください、それは私のために働いた：

$(document).ready(function(){
    $('.modal').each(function(){
            var src = $(this).find('iframe').attr('src');

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

            $(this).find('iframe').attr('src', '');
            $(this).find('iframe').attr('src', src);

        });
    });
});
16
knightkiddo

ここで、@ guillesalazarの答えを一般化します。

これにより、任意のbootstrap= modal（モーダルが閉じている場合）内のiFrameがリセットされます。

$(function(){
  $("body").on('hidden.bs.modal', function (e) {
    var $iframes = $(e.target).find("iframe");
    $iframes.each(function(index, iframe){
      $(iframe).attr("src", $(iframe).attr("src"));
    });
  });
});

これをレイアウトに追加すると、設定が完了します。

PDATE：複数のiFrameを持つモーダル用に変更されたコード。

13
thekingoftruth

これは、モーダルウィンドウでビデオを再生し、閉じると再生を停止するための簡単な方法です。

モーダルが表示されている場合、.htmlを使用してiFrameをビデオとともにモーダルボディにロードし、非表示の場合はモーダルボディを何も置き換えません。

$('#myModal').on('show', function () { 
 $('div.modal-body').html('YouTube iFrame goes here');  
});
$('#myModal').on('hide', function () {
 $('div.modal-body').html('');
});

Jsfiddleの例を次に示します。

http://jsfiddle.net/WrrM3/87/

13
Nathan McFarland

最初にiframe srcを空にしてから、再度設定する必要があります。

だから私の仕事の答え：

$('#myModal').on('hidden.bs.modal', function () {
    var src = $(this).find('iframe').attr('src');
    $(this).find('iframe').attr('src', '');
    $(this).find('iframe').attr('src', src);
});

2014年10月。ForBootstrap 3。

5
littlealien

ここに私の解決策があり、bootstrapイベント呼び出しを使用して以下を解決します。

  1. モーダル表示時のムービーの自動再生
  2. モーダルが非表示になったらムービーを停止する

[〜＃〜] html [〜＃〜]モーダル内のカルーセル、最初のアクティブなアイテムはiframeビデオです

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <div class="fill">
                                <iframe id="videoIframe" width="100%" height="100%" src="https://www.youtube.com/embed/UVAjm8b7YFg?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascriptモーダルを表示するときに自動再生し、URLをリセットしてiframe srcに再度適用します

$('#myModal').on('show.bs.modal', function() {
    $("#videoIframe")[0].src += "&autoplay=1";
});
$('#myModal').on('hidden.bs.modal', function(e) {
    var rawVideoURL = $("#videoIframe")[0].src;
    rawVideoURL = rawVideoURL.replace("&autoplay=1", "");
    $("#videoIframe")[0].src = rawVideoURL;
});
3
Brandon Franklin

多くのビデオでモーダルがありました。 @guillesalazarによるコードを更新して、モーダル内の複数のビデオを閉じました。

$("#myModal").on('hidden.bs.modal', function (e) {
            $("#myModal iframe").each(function () {
                $(this).attr("src", '');
            });
        });
2
Lee Harris

これは完璧です：

$("#myModal").on("hidden.bs.modal", function(t) {
   var o = $(t.target).find("iframe");
   o.each(function(t, o) {
      $(o).attr("src", $(o).attr("src"))
   });
});

ただし、モーダルが開いたときに開始/終了するときに停止するには、次のコードを使用します。

ただし、次のように、srcにenablejsapi=1を追加してください。

<iframe src="https://www.youtube.com/embed/YOUR_VIDEO_CODE?rel=0&amp;controls=0&amp;showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>


function playStopVideo() {
    var youtubeFunc ='';
    var outerDiv = $("#myModal");
    var youtubeIframe = outerDiv.find("iframe")[0].contentWindow;
    outerDiv.on('hidden.bs.modal', function (e) {
        youtubeFunc = 'stopVideo';
        youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*');
    });
    outerDiv.on('shown.bs.modal', function (e) {
        youtubeFunc = 'playVideo';
        youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*');
    });
}

playStopVideo();
2
nikola_wd

上記のGuilleの答えを拡張すると、これはBootstrap 3、8月14日時点のyoutubeの最新バージョン、および複数のビデオ/ modalsで動作します） 1ページ。

$(".modal").on('hidden.bs.modal', function(e) {
    $iframe = $(this).find( "iframe" );
    $iframe.attr("src", $iframe.attr("src"));
});
1
spiral

これらすべての答えよりはるかに簡単な方法は、src全体を置き換えることです。これはすべてのモーダルで機能し、必要に応じてiframeクラスを調整できます。

$('.modal').on('hidden.bs.modal', function(e) {
    var closestIframe = $(e.currentTarget).find('iframe');
    var rawVideoURL = $("iframe")[0].src;

    closestIframe[0].src = "";
    closestIframe[0].src = rawVideoURL;
  });
1
Jonathan

Bootstrap 3および最新のYouTube embed形式で機能するこれに対する私のソリューションは次のとおりです。

ビデオがBootstrap 3 Modalを含む標準のid="#video-modal"に埋め込まれていると仮定すると、この簡単なJavascriptが機能します。

$(document).ready(function(){
  $("#video-modal").on('hide.bs.modal', function(evt){
    var player = $(evt.target).find('iframe'),
        vidSrc = player.prop('src');
    player.prop('src', ''); // to force it to pause
    player.prop('src', vidSrc);
  });
});

YouTube APIの使用を含むこの問題に対する提案された解決策を見ましたが、サイトがhttpsサイトでない場合、またはYouTubeが推奨する最新の形式を使用してビデオが埋め込まれている場合、またはno-cookiesオプションを設定してから、これらのソリューションは機能しませんを選択すると、ビデオの代わりに "TVがデッドチャンネルに設定されました"の効果が得られます。

上記をすべてのブラウザでテストしましたが、非常に確実に動作します。

1
Dave Sag

RuslanasBalčiūnas と Nathan McFarland の回答を組み合わせて、私にとってうまく機能するものをコーディングしました。

$('#myModal').on('hide',function(){
   $('.modal-body iframe').attr('src','');
});

したがって、基本的には、モーダルイベントが閉じられたときにsrcのiframe属性を何も設定しません。短くて甘い。

1
ckpepper02

7年後も、これを解決する必要があります。

修正する最良の方法を見つけました（ RobCalvert12 answerに触発）

  jQuery(".modal-backdrop, .modal.open .close,.modal.open .btn").live("click", function() {  
         // Get iframe opened 
         var iframe_open = jQuery('.modal.open');     
         // Get src from opened iframe 
         var src = iframe_open.attr('src');
         // replace src by src to stop it that's the tips
        iframe_open.attr("src", src);
});
1
Mepps

HTML data- *属性 を使用した2つ以上のYoutubeビデオのソリューション。モーダルが開閉されると、ビデオautoplaysおよびstops.

<button data-url="https://www.youtube.com/embed/C0DPdy98e4c" data-toggle="modal" data-target="#mymodal">Video 1</button>
<button data-url="https://www.youtube.com/embed/ScMzIvxBSi4" data-toggle="modal" data-target="#mymodal">Video 2</button>

<!-- Modal -->
<div id="mymodal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

$('.modal').on('show.bs.modal', function (event) {
  $(this).find('iframe').attr("src", $(event.relatedTarget).data('url') );
});

$('.modal').on('hidden.bs.modal', function (e) {
    $(this).find('iframe').attr("src", "");
});

ここにCodepenデモがあります： https://codepen.io/danielblazquez/pen/oOxRJq

0
Daniel G. Blázquez
$('#myModal').on('hide', function () {
    $('#video_player')[0].stopVideo();
})
0
Ruslanas Balčiūnas
 //stop youtube video on modal close
$('.modal').on('hidden.bs.modal', function () {
    var iframVideo = $('.modal').find('iframe');
    $(iframVideo).attr("src", $(iframVideo).attr("src"));
});
0
Birendra Maharjan

@guillesalazaarの答えは私の修正の前半に過ぎなかったので、将来誰かに役立つ場合に備えて状況を共有することを強いられたと感じました。私も埋め込まれたyoutubeビデオを持っていますが、フレームをautoplay=1。ページ読み込み時の自動再生の問題を回避するために、クリックハンドラーを使用してiframeソースを設定する変数に保存されているyoutube URLを持っています。これを解決するために、属性ソースリンクを削除しました。

モーダルウィンドウをトリガーする私のURL：

   <div id="movieClick" class="text-center winner"> 
<a href="#" data-toggle="modal" data-keyboard="true" data-target="#movie">
    </div>

私の非表示のモーダルウィンドウdiv：

<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
    <div class="modal-dialog">

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">They Live (1988)</h4>
    </div>
     <div class="modal-body">
        <iframe id="onscreen" width="100%" height="460px" src="" frameborder="0" allowfullscreen></iframe>

      </div>
</div>

</div>
</div>

私のJS：

$("#movieClick").click(function(){
var theLink  = "https://www.youtube.com/embed/Wp_K8prLfso?autoplay=1&rel=0";
document.getElementById("onscreen").src = theLink;
});


// really annoying to play in the Background...this disables the link
$("#movie").on('hidden.bs.modal', function (e) {
    $("#movie iframe").attr("src", '');
});
0
Frankenmint

angularの場合、またはダイナミックhtmlの場合、または複数のiframeがある場合は以下のように使用します

$("#myModal").on('hidden.bs.modal', function (e) {
  $("#myModal iframe").each(function(){
    $(this).attr("src", $(this).attr("src"));
  });
});
0
Gopala raja naika