Question

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

我知道之前已经问过这个问题，但我能找到的答案会导致包含许多视频的页面有很多javascript代码，而我正试图减少膨胀。到目前为止，我有以下工作用于个别视频，但问题是每个模态和每个视频必须使用适当的变量重复此javascript代码。

$('#vidThumbnail-1').click(function () {
        var src = 'http://www.youtube.com/embed/8bKmrhI-YT8?&amp;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个模态时，这会变得臃肿！有没有办法利用数据属性方法启动模态内置引导程序而不是单独调用它，同时仍然只在目标模态中修改iframe src？打开模态的链接将是：

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

然后：

读取目标模态中iframe的现有src属性（将其设置为变量？）
使用“＆amp; autoplay = 1”附加现有src属性以启动视频。
在关闭模态时将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+"&amp;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

您好@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嵌入网址，您就可以创建尽可能多的链接。在您的情况下，@ Benjamin将图像保留在锚标记中，以便图像可单击。

Answer 4

这是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 5

我找不到动态的方法来处理这个问题，所以我创建了一个动态的方法来处理我们正在处理的网站。

以下是链接：

<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 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":""}', '*')
    });
})

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

6 个答案: