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