我正在尝试使用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>
发布于 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 {
}
发布于 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();
});
发布于 2013-10-02 21:44:48
我有一个建议给你!
我将使用:
$('#myModal').on('hidden.bs.modal', function () {
$('#myModal iframe').removeAttr('src');
})
而不是:
$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
因为你也可以在没有按钮的情况下关闭模式,所以有了这段代码,它就会在每次隐藏模式时删除视频。
https://stackoverflow.com/questions/18622508
复制相似问题