Youtube视频使用引导模式
Youtube video using bootstrap modal
这是3个youtube视频的代码,点击一个图像/按钮就会弹出一个youtube视频
<div class="container">
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s">VIDEO</a>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div>
<iframe class = "size" src=""></iframe>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal1" data-theVideo="https://www.youtube.com/embed/tIBxavsiHzM">VIDEO</a>
<div class="modal fade" id="videoModal1" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div>
<iframe class="size" src=""></iframe>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal2" data-theVideo="http://www.youtube.com/embed/W7qWa52k-nE">VIDEO</a>
<div class="modal fade" id="videoModal2" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div>
<iframe class="size" src=""></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
和css:
iframe.size
{
width: 800px;
height:550px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
javascript:
autoPlayYouTubeModal();
function autoPlayYouTubeModal() {
var trigger = $("body").find('[data-toggle="modal"]');
trigger.click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-theVideo"),
videoSRCauto = videoSRC + "?autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
});
}
因此,从上面的代码中,我无法在按钮点击上创建或播放3个单独的视频。有没有解决这个的方案
您的代码在这个小提琴中工作。
我唯一改变的是你的youtube链接有"http",而不是"https",所以你可能在控制台中遇到了混合内容错误。
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal2" data-theVideo="https://www.youtube.com/embed/W7qWa52k-nE">VIDEO</a>
相关文章:
- 如何删除视频's缩略图时's加载在JW Player's闪光模式
- Twitter Boostrap:模式窗口在重新播放模式窗口后不播放视频
- youtube视频的正则表达式匹配模式可以以非贪婪的方式完成吗
- 视频到完整模式
- 视频通过javascript被隐藏,但已经开始播放(自动播放模式),即使是's不可见
- Youtube视频使用引导模式
- bootstrap youtube视频模式自动播放
- 如何了解视频是否在chrome中以全屏模式播放
- 让html 5视频在全屏模式下自动打开
- 弹出模式jquery播放现有的嵌入youtube视频时,试图播放另一个
- 如何在iOS/iPad上进入全屏模式时停止HTML5视频播放器
- 当链接中引用视频时,是否可以在iPad上以全屏模式打开.mp4
- 关闭后,引导模式弹出窗口上的视频继续播放音频
- 引导模式的目标 id,用于在模式关闭时停止播放视频
- 将 HTML5 视频复制到 jQuery 对话框模式窗口中
- 模式 HTML 5 视频在关闭时静音
- 如何在模式窗口关闭时使用 HTML5 停止为视频
- 在 Twitter 引导中禁用视频自动播放,并在模式关闭时停止视频
- c#asp.net如何使用bootstrap模式将视频源文件名添加到不同的媒体类型中
- 禁用HTML5视频全屏模式