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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

"link">My video   "myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     class="modal-dialog">         class="modal-content">             class="modal-header">                 "button" class="close" data-dismiss="modal" aria-hidden="true">×                          class="modal-body">

 

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.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):

1 2 3 4 5 6 7 8 9 10

.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