Twitter Bootstrap Modal停止Youtube视频

Question

我是javascript的新手，并尝试使用Twitter引导程序来获得一个好看的网站并快速运行。我知道这与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>

Answer 1

我知道我迟了2年多，但从那以后，有些事情发生了变化，B3开箱即用的新方法是：

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

玩Bootstrap玩得开心！

Answer 2

有一个很好的正确方法 - 请参阅批准的this post答案中的评论。

虽然不能让自己第一次工作，并且匆忙，所以我做了一个相当可怕的hacky代码来完成这个伎俩。

此代码段“刷新”嵌入iframe的src，导致其重新加载：

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

Answer 3

如果有人仍有问题，试试这个，它对我有用：

$(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);

        });
    });
});

Answer 4

我发现这是一种简单的方法，可以在模态窗口中播放视频，然后在关闭时停止播放。

当显示模态时，使用.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/

Answer 5

在这里，我概括了@ guillesalazar的答案。

这将重置任何bootstrap模式中的任何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"));
    });
  });
});

将此添加到您的布局中，然后重新设置。

更新：针对具有多个iFrame的模式修改了代码。

Answer 6

您应首先清空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月。对于Bootstrap 3。

Answer 7

这是我的解决方案，它使用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 自动播放，然后重置网址并再次将其应用于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;
});

Answer 8

在 <form [formGroup]="addProductForm" (ngSubmit)="onSubmit()"> <div class="row"> <div class="col s6"> <button [mat-dialog-close]="true" mat-raised-button color="primary" [disabled]="SaveButtonDisable" (click)="addProduct()" class="save-button">{{'SAVE_BTN' | translate:lang }}</button> <button [mat-dialog-close]="true" mat-raised-button color="secondary">{{'BACK_BTN' | translate:lang}}</button> </div> <!-- [disabled]="productSelect.empty" --> </div> <mat-dialog-content> <div class="common-prod-form-wrapper"> <div class="row"> <mat-form-field> <mat-select required [formControl]="prodCtrl" placeholder="Select" #productSelect (selectionChange)="onChangeProduct($event.value)"> <ngx-mat-select-search [formControl]="prodFilterCtrl" placeholderLabel="Find product..." ></ngx-mat-select-search> <mat-option *ngFor="let product of filteredProducts | async" [value]="product"> {{product.product_name}} </mat-option> </mat-select> </mat-form-field> </div> </div> </mat-dialog-content> </form> 事件的引导模式中重新加载任何 iframe。

为修复 hide.bs.modal 重置后的 iframe 渲染而添加的 setTimeout 延迟。

src

Answer 9

这个完美无缺：

$("#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();

Answer 10

有一个有很多视频的模态。更新了@guillesalazar的代码，以关闭模式中的多个视频。

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

Answer 11

扩展Guille上面的答案，这是一个插件功能，可以使用Bootstrap 3，截至8月14日的最新版youtube，以及适用于多个视频/模态在一个页面中。

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

Answer 12

我的解决方案适用于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选项，则这些解决方案无法正常工作并且您将“电视设置为死频道”效果而非您的视频

我已经在我可以放下的每个浏览器上测试了上述内容，并且它非常可靠。

Answer 13

我结合使用了Ruslanas Balčiūnas和Nathan McFarland的答案来编写适合我的内容。

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

所以基本上这会在触发关闭模态事件时将src的{​​{1}}属性设置为空。简短又甜蜜。

Answer 14

比所有这些答案更简单的方法就是替换整个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;
  });

Answer 15

1。将Youtube嵌入页面（html）

将Youtube div容器添加到您的网站：

<div id="ytplayer">This will be replaced with the Youtube iFrame</div>

添加Youtube Javascript API（iFrame）

<script>
    // Ads Youtube JS API
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


    // This function creates an <iframe> (and YouTube player) after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',
      videoId: 'ncif63mSZl4',
        WMode: 'transparent',
        wmode: 'opaque',
        playerVars: {
            'autoplay': 0,
            'controls': 0,
            'autohide':1,
            'rel':0,
            'showinfo': 0,
            'modestbranding': 1,
        },
      });
    }

   function stopVideo() {
    player.stopVideo();
   }
    
   function pauseVideo() {
    player.pauseVideo();
   }
    
   function playVideo(){
    player.playVideo();
   }
</script>

使用jQuery（Bootstrap Modal）进行控制

  // Open Modal and start Playing Youtube Video
  $("#myModalTrigger").click(function(){
    $("#video-modal").modal(); // opens up the Modal
    playVideo(); // Starts playing Video
  });

  // Stop Player on Modal hide
  $('#video-modal').on('hide.bs.modal', function (e) {
    stopVideo(); // stop player
  });

Answer 16

7年后，我们仍然需要解决这个问题。

我们找到了解决问题的最佳方法（受RobCalvert123的启发）

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

Answer 17

@ guillesalazaar的答案只是我修复的上半部分所以我觉得有必要分享我的情况以防将来帮助某人。我也有一个嵌入式YouTube视频，但是当我使用import scala.language.experimental.macros import scala.reflect.macros.blackbox.Context import scala.reflect.runtime.{ universe ⇒ u } object Timed { def apply[T](block: ⇒ T): T = macro Timed.apply_impl[T] def apply_impl[T: c.WeakTypeTag](c: Context)(block: c.Expr[T]): c.Expr[T] = { import c.universe._ implicit val cc: c.type = c val kk = u.internal.reificationSupport.freshTermName("kk") val t0 = c.freshName("t0") val t1 = c.freshName("t1") val tdiff = c.freshName("tdiff") val blk = c.freshName("blk") val t0n = "t0" println(t0) val res = c.Expr( q""" val $kk = System.nanoTime() $block val t1 = System.nanoTime() val tdiff= t1 - t0 log.debug("Took: {}", tdiff) $block """) println("Timing block: ") println(show(res)) res } } 加载帧时，我会自动播放。为了解决页面加载时的自动播放问题，我将我的youtube url存储在一个变量中，该变量使用单击处理程序设置iframe源。要解决这个问题，我只需删除属性源链接：

我的网址触发模态窗口：

autoplay=1

我隐藏的模态窗口divs：

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

我的JS：

<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>

Answer 18

如果您有多个包含许多视频的模态，例如，您在轮播中的每个幻灯片上都有一个模态，则您需要一些更动态的功能来关闭/停止可见幻灯片中的视频，而不会弄乱其他模态，使用它：

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

Answer 19

对于角度或动态html，或者如果我们有多个iframe，请按照以下说明使用

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

Answer 20

我使用HTML data-* attribute处理2个或更多Youtube视频的解决方案。打开和关闭模式时，视频自动播放和停止。

<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

Answer 21

 //stop youtube video on modal close
$('.modal').on('hidden.bs.modal', function () {
    var iframVideo = $('.modal').find('iframe');
    $(iframVideo).attr("src", $(iframVideo).attr("src"));
});

Answer 22

$('#myModal').on('hide', function () {
    $('#video_player')[0].stopVideo();
})