CODEWITHSUNDEEP
jqueryyoutubetwitter-bootstrapmodal-dialog
Andrew
Andrew

Reputation: 1121

Auto Starting & Stopping a YouTube Video with Twitter Bootstrap

I am using Twitter Bootstrap's modal box to pop-up a video lightbox when a user clicks on a video thumbnail image (example: http://seniorshomecare.harmonyapp.com/how-we-can-help, use password: shc). If possible, I would like to have the video auto-play when the lightbox pops up and auto-stop when the user closes the lightbox. There are some similar questions to this, but none of them have helped me out much.

Any help would be greatly appreciated. Thanks!

Upvotes: 3

Views: 7192

Answers (3)

josephap
josephap

Reputation: 2285

The above answers work nicely if you have only one modal on your page. If you have several, your video will be loaded into all of your other modals, and begin playing concurrently in some browsers.

To fix that issue, be more specific with the javascript that inserts and removes the video by adding #myModal before div.modal-body, as follows:

$('#myModal').on('show', function () {
  $('#myModal div.modal-body').html('<iframe src="http://www.youtube.com/v/itTskyFLSS8&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;autoplay=1" width="500" height="281" frameborder="0" allowfullscreen=""></iframe>'); 
});

$('#myModal').on('hide', function () {
  $('#myModal div.modal-body').html('&nbsp;');  
});

Upvotes: 2

WeisbergWeb
WeisbergWeb

Reputation: 83

This will remove the iFrame when the modal is closed: 

$('#myModal').on('hide', function () {
$('div.modal-body').html('&nbsp;');  
});

http://jsfiddle.net/WrrM3/82/

Upvotes: 4

baptme
baptme

Reputation: 10092

add &autoplay=1 to the youtube video url.

http://support.google.com/youtube/bin/answer.py?hl=en&answer=1181821

EDIT:

You can use the Event show to trigger a function which add the code into the modal

$('#myModal').on('show', function () {
  $('div.modal-body').html('<iframe src="http://www.youtube.com/v/itTskyFLSS8&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;autoplay=1" width="500" height="281" frameborder="0" allowfullscreen=""></iframe>'); 
});

Demo : http://jsfiddle.net/baptme/WrrM3/

The solution is not complete, you will have to remove the iframe when closing the modal.

Upvotes: 5

Related Questions