Modal中的Bootstrap 3和Youtube
Modal中的Bootstrap 3和Youtube
提问于 2013-09-05 03:45:39
我正在尝试使用Bootstrap 3中的Modal功能来显示我的Youtube视频。它可以工作，但我不能点击Youtube视频中的任何按钮。
对此有什么帮助吗？
下面是我的代码：
<div id="link">My video</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script>
$('#link').click(function () {
var src = 'http://www.youtube.com/v/FSi2fJALDyQ&autoplay=1';
$('#myModal').modal('show');
$('#myModal iframe').attr('src', src);
});
$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
</script>回答 15
Stack Overflow用户
回答已采纳
发布于 2013-09-06 18:21:51
我发现这个问题(或者我在https://github.com/twbs/bootstrap/issues/10489发现并描述的问题)与.modal.fade .modal-dialog类上的CSS3转换(转换)相关。
在bootstrap.css中，您将看到如下所示的行：
.modal.fade .modal-dialog {
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}将这些行替换为以下代码将正确显示电影(在我的示例中)：
.modal.fade .modal-dialog {
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
}Stack Overflow用户
发布于 2014-05-13 19:03:44
我把这个html/jQuery动态YouTube视频模式脚本放在一起，当单击触发器(链接)时自动播放YouTube视频，触发器还包含要播放的链接。该脚本将找到本机引导模式调用，并使用触发器中的数据打开共享模式模板。请看下面，让我知道你的想法。我很想听听你的想法。
HTML模式触发器：
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s" >VIDEO</a>HTML模式视频模板：
<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 width="100%" height="350" src=""></iframe>
</div>
</div>
</div>
</div>
</div>JQUERY函数：
//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
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);
});
});
}函数调用：
$(document).ready(function(){
autoPlayYouTubeModal();
});Stack Overflow用户
发布于 2013-10-02 21:44:48
我有一个建议给你！
我将使用：
$('#myModal').on('hidden.bs.modal', function () {
$('#myModal iframe').removeAttr('src');
})而不是：
$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});因为你也可以在没有按钮的情况下关闭模式，所以有了这段代码，它就会在每次隐藏模式时删除视频。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18622508
复制相关文章
相似问题
腾讯云开发者
