I need a simple demo of how to launch and close a YouTube video in a Twitter Bootstrap Modal from JavaScript (rather than an anchor tag click).
So far I can launch it just fine, but on close it keeps playing in the background.
Here's my html:
<div id="myModalThumbnail"><img src="http://placehold.it/250x150&text=Video%20Thumbnail">
</div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe width="520" height="390" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
Javascript:
$('#myModalThumbnail').click(function () {
var src = 'http://www.youtube.com/v/KVu3gS7iJu4&rel=0&autohide=1&showinfo=0&autoplay=1';
$('#myModal').modal('show');
$('#myModal iframe').attr('src', src);
});
And a jsfiddle: http://jsfiddle.net/VtKS8/5/
What next?
on('modalclosed', function() { console. log("Modal is closed then stop the video"); $('#video'). trigger('pause'); });
add ID attribute on iframe. add jQuery code which will fire on modal close event. the code simply removes src attribute from iframe which stops the Youtube player.
Basic ModalCreate a modal by using the . modal class and attribute data-toggle = "modal" on a element, like a button or link, along with a data-target = "#identifier" or href = "#identifier" to target a specific modal to toggle.
Well, looks like all I needed to do was remove the src
attribute on the button click.
$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
JSFiddle: http://jsfiddle.net/VtKS8/6/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With