Bootstrap Modals 和 Youtube：关闭时自动播放和停止

Question

我需要能够在 Twitter Bootstrap 模式打开时自动播放 youtube 视频，然后在关闭时停止该视频。

我知道以前有人问过这个问题，但我能找到的答案会导致包含许多视频的页面出现大量 javascript 代码，我正试图减少臃肿。到目前为止，我对单个视频进行了以下工作，但问题是每个模式和每个视频都必须使用适当的变量重复此 javascript 代码。

$('#vidThumbnail-1').click(function () {
        var src = 'http://www.youtube.com/embed/8bKmrhI-YT8?&autoplay=1';
        $('#vid1').modal('show');
        $('#vid1 iframe').attr('src', src);

      //Fit Vids Implamented Below for Mobile Compatibility
        $("#vid1Thumbnail-1 iframe").wrap("<div class='flex-video'/>");
        $(".flex-video").fitVids();
    });
$('#vid1 button').click(function () {
        $('#vid1 iframe').removeAttr('src');
    });

HTML：

<div id="vidThumbnail-1"><img src="http://img.youtube.com/vi/8bKmrhI-YT8/0.jpg" /></div>

<div id="vid1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        <iframe src="http://www.youtube.com/embed/8bKmrhI-YT8" width="640" height="360" frameborder="0" allowfullscreen></iframe>   
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    </div>
  </div>

当您有 20 个视频和 20 个模态时，这会变得臃肿！ 有没有办法利用 Data Attributes 方法来启动内置引导模式的模式，而不是单独调用它，同时仍然只在目标模式中修改 iframe src？打开模式的链接将是：

<a href="#vid1" role="button" data-toggle="modal">
<img src="http://img.youtube.com/vi/8bKmrhI-YT8/0.jpg"></a>

然后：

1. 读取目标模式中 iframe 的现有 src 属性（将其设置为变量？）
2. 将现有的 src 属性附加到“&autoplay=1”以启动视频。
3. 在关闭模式时将 src 属性替换为原始属性（通过上面的按钮特别好）。

这样我就不需要为每个单独的模态编写脚本，节省了大量时间和臃肿的 JS。但是，我不知道从哪里开始修改 bootstrap.js 来完成此操作，而且我在 JS（或任何）编程方面没有经验。感谢您能给我的任何帮助！

Answer 1

我的解决方案：

• 不手动将&autoplay=1 添加到 iframe src

然后添加这个脚本：

var videoSrc = $("#myModal iframe").attr("src");

$('#myModal').on('show.bs.modal', function () { // on opening the modal
  // set the video to autostart
  $("#myModal iframe").attr("src", videoSrc+"&autoplay=1");
});

$("#myModal").on('hidden.bs.modal', function (e) { // on closing the modal
  // stop the video
  $("#myModal iframe").attr("src", null);
});

Answer 2

                    <div class="close-button">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                    </div>

   $('.close').on('click', function (e) {
        $("#myModal iframe").attr("src", null);
    });

Answer 3

我找不到处理此问题的动态方法，因此我为我们正在处理的网站创建了一种动态方法来处理此问题。

以下是链接：

<li><a href="#" data-toggle="modal" data-target="#video1">Video: video 1</a></li>
<li><a href="#" data-toggle="modal" data-target="#video2">Video: video 2</a></li>

以下是模态：

<div id="video1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/vidpath" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div id="video2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/vidpath2" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

这是脚本：

// autoplay video functionality
$( "[data-target^='#video']" ).click(function() { 
    // get the ID of the clicked video
    var dataTarget = $(this).attr("data-target");
    dataTarget = dataTarget.substring(1,7); 
    var vidId = '#'+dataTarget; 

    // get the vid src
    var vidSrc = $(vidId+ " iframe").attr('src');

    // create the autoplay
    var vidSrcAuto = vidSrc+'?autoplay=1'; 

    // get the iframe element
    var iframeEl = $(vidId+ " iframe"); 


    $(vidId).on('show.bs.modal', function () {  
        $(iframeEl).attr("src", vidSrcAuto);
    });

    $(vidId).on('hidden.bs.modal', function (e) {  
        $(iframeEl).attr("src", vidSrc);  
    });   

}); 

Answer 4

你好@Benjamin Morrison 希望你已经得到了解决方案，我正在为仍在寻找相同解决方案的其他用户回答这个问题

$(document).ready(function() {
  $('.modalclick').on('click', function(e) {
    e.preventDefault();
    var src = $(this).attr('href');
    $('#myModal').modal('show');
    $('#myModal iframe').attr('src', src);
  });
  //auto close or pause on model hide
  $("#myModal").on('hidden.bs.modal', function(e) {
    $("#myModal iframe").attr("src", '');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
      </div>
      <div class="modal-body">
        <iframe src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

      </div>
      <div class="modal-footer">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">SKIP >></button>

      </div>
    </div>
  </div>
</div>
<a class="modalclick" href="https://www.youtube-nocookie.com/embed/3j4nia24Oms?rel=0&showinfo=0&autoplay=1">click me</a><br>
<a class="modalclick" href="https://www.youtube.com/embed/ycK617mKlvA?rel=0&showinfo=0&autoplay=1">click me 1</a><br>
<a class="modalclick" href="https://www.youtube.com/embed/z329gFDUJis?rel=0&showinfo=0&autoplay=1">click me 2</a>

只需在可点击链接的 href 标签上添加 Youtube Embed url，您可以制作尽可能多的链接。 @Benjamin 在您的情况下将图像保留在锚标记内，以便图像可点击。

Answer 5

这是JS Fiddle。

我添加了一些渐进增强功能，因此如果 JS 失败，在这种情况下，您将被带到 YouTube 视频。

该链接需要一个数据视频嵌入和一个目标，我们将在其中添加视频，其他一切都应该正常工作。示例中的事件适用于 Bootstrap 3 模式，如果您使用的是 2.X，它将只是“隐藏”。

$('[data-provider="modal-video"]')
   .on('click', function (evt) {
      evt.preventDefault();
      var $target = $(evt.currentTarget),
          videoSrc = $target.data('video-embed'),
          $modal = $($target.data('target'));

      $modal
        .find('iframe').attr('src', videoSrc)
        .end()
        .on('hide.bs.modal', function () {
            $(this)
                .off('hide.bs.modal')
                .find('iframe').attr('src', '');
        })
        .modal('show');
});

Answer 6

干净的方法是为嵌入式 iframe 启用 JS Youtube API。只需添加enablejsapi 参数即可。截至 2020 年，这只是没有黑客攻击的停止视频的有效解决方案。

我最终得到：

function play_youtube_in_modal(src) {
    // enablejsapi = for enabling to stop on hide.bs.modal
    src += "?autoplay=1&modestbranding=1&rel=0&fs=1&enablejsapi=1";
    $("#modal_youtube_iframe").attr("src", src);

    //show
    $("#modal_youtube").modal("show");
}

// stop playing the youtube video when I close the modal
$('#modal_youtube').on('hide.bs.modal', function (e) {
    $('#modal_youtube_iframe').each(function(){
        this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
    });
})