html 完整示例 - 在模态中自动播放youtube视频(Bootstrap + Jquery)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 完整示例 - 在模态中自动播放youtube视频(Bootstrap + Jquery)相关的知识,希望对你有一定的参考价值。
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(function() {
$(".video").click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-video"),
videoSRCauto = videoSRC + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
});
});
</script>
</head>
<body>
<button class="btn btn-success btn-lg video" data-video="https://www.youtube.com/embed/8L5PqL4ylIU" data-toggle="modal" data-target="#videoModal">Play Video 1</button>
<button class="btn btn-default btn-lg video" data-video="https://www.youtube.com/embed/HBdcL7YsdBY" data-toggle="modal" data-target="#videoModal">Play Video 2</button>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<iframe width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
以上是关于html 完整示例 - 在模态中自动播放youtube视频(Bootstrap + Jquery)的主要内容,如果未能解决你的问题,请参考以下文章
以模态自动播放Youtube视频? (Avada Wordpress主题)
如何在 ext 4 中制作完整的模态窗口?
仅在缓冲完整视频后才开始播放 HTML5 视频
如何同步自动播放/循环中的两个 HTML 视频元素?
使用Light YouTube嵌入模态(从基础显示) - 如何在模态窗口关闭后停止视频播放?
关闭模态后视频继续播放