jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – Bootstrap Modals和Youtube:自动播放和关闭时停止大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

我需要能够在打开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("

HTML:

jquery  –  Bootstrap Modals和Youtube:自动播放和关闭时停止

当你有20个视频和20个模态时,这会变得臃肿!@H_502_22@有没有办法利用数据属性方法启动模态内置引导程序而不是单独调用它,同时仍然只在目标模态中修改iframe src?打开模态的链接将是:

jquery  –  Bootstrap Modals和Youtube:自动播放和关闭时停止

然后:

>读取目标模态中iframe的现有src属性(将其设置为变量?)@H_502_22@>使用“& autoplay = 1”附加现有src属性以启动视频.@H_502_22@>关闭模态后,将src属性替换为原始属性(通过按钮,特别是上面的按钮就可以了).

这样我就不需要为每个单独的模态编写脚本,节省了大量的时间和臃肿的JS.但是,我不知道从哪里开始修改bootstrap.js来实现这一目标,而且我没有经验JS(或任何)编程.感谢你给与我的帮助!

最佳答案
我的解决方

>不要手动为iframe src添加& amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp;

然后添加此脚本:

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

大佬总结

以上是大佬教程为你收集整理的jquery – Bootstrap Modals和Youtube:自动播放和关闭时停止全部内容,希望文章能够帮你解决jquery – Bootstrap Modals和Youtube:自动播放和关闭时停止所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: