引导模态和Youtube:关闭时自动播放和停止 [英] Bootstrap Modals & Youtube: Autoplay and Stop on Close

问题描述

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

I need to be able to autoplay a youtube video when a Twitter Bootstrap modal is opened and subsequently stop that video on close.

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

I know this question has been asked before, but the answers I can find would lead to a LOT of javascript code for a page that contains MANY videos and I am trying to cut down on the bloat. So far I have the following working for individual videos, but the issue is that each modal and each video must have this javascript code repeated with the proper variables.

$('#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?打开模式的链接将是:

This gets bloated when you have 20 videos and 20 modals! Is there a way to utilize the Data Attributes method of initiating a modal built-into bootstrap rather than call it individually, while still modifying the iframe src within only the target modal? The link to open the modal would then be:

<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(或任何)编程方面没有经验.感谢您能给我的任何帮助！

This way I would not need to write script for each individual modal, saving a lot of time AND bloated JS. However, I have no idea where to start modifying the bootstrap.js to accomplish this and I'm not experienced in JS (or any) programming. Thanks for any help you can give me!

推荐答案

我的解决方案:

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

• do not add &autoplay=1 to the iframe src manually

然后添加这个脚本:

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

这篇关于引导模态和Youtube:关闭时自动播放和停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！