Bootstrap 3 模态框播放视频
I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. It works, but I can't click on any buttons in the Youtube video.
Any help on this?
Here's my code:
<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>
I found this problem (or the problem I found and described at https://github.com/twbs/bootstrap/issues/10489) related to CSS3 transformation (translation) on the .modal.fade .modal-dialog
class.
In bootstrap.css you will find the lines shown below:
.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); }
Replacing these lines with the following will show the movie correctly (in my case):
.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 { }
http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal