Bootstrap and Youtube Modifications: Auto Play and Stop on Close

Question

I need auto-play of youtube videos when the Twitter Bootstrap motive was opened and subsequently stopped the video from closing.

I know this question has been asked before, but the answers I can find will lead to a lot of javascript code for a page containing a lot of videos, and I'm trying to reduce the swelling. So far I have been working on individual videos, but the problem is that every modal and every video should have this javascript code repeated with the corresponding variables.

$('#vidThumbnail-1').click(function () { var src = 'http://www.youtube.com/embed/8bKmrhI-YT8?&amp;autoplay=1'; $('#vid1').modal('show'); $('#vid1 iframe').attr('src', src); //Fit Vids Implamented Below for Mobile Compatibility $("#vid1Thumbnail-1 iframe").wrap("<div class='flex-video'/>"); $(".flex-video").fitVids(); }); $('#vid1 button').click(function () { $('#vid1 iframe').removeAttr('src'); }); 

HTML:

 <div id="vidThumbnail-1"><img src="http://img.youtube.com/vi/8bKmrhI-YT8/0.jpg" /></div> <div id="vid1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-body"> <iframe src="http://www.youtube.com/embed/8bKmrhI-YT8" width="640" height="360" frameborder="0" allowfullscreen></iframe> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> </div> 

This is inflated when you have 20 videos and 20 modals! Is there a way to use the Data Attributes method to launch a modal built-in bootstrap, and not to call it individually, but at the same time modify the iframe src only for the target modal? Then the link to open the modal will be as follows:

 <a href="#vid1" role="button" data-toggle="modal"> <img src="http://img.youtube.com/vi/8bKmrhI-YT8/0.jpg"></a> 

Then:

• Read the existing src iframe attribute in the target modal (set it to a variable?)
• To initiate the video, add the existing src attribute with the parameter "& autoplay = 1".
• Replace the src attribute with the original when closing the modal (using the button, in particular, as shown above).

This way, I would not need to write a script for each individual modal, saving a lot of time and bloated JS. However, I do not know where to start modifying bootstrap.js to accomplish this, and I do not experience JS (or any) programming. Thanks for any help you can give me!

Answer 1

My decision:

• do not add &autoplay=1 to iframe src manually

then add this script:

 var videoSrc = $("#myModal iframe").attr("src"); $('#myModal').on('show.bs.modal', function () { // on opening the modal // set the video to autostart $("#myModal iframe").attr("src", videoSrc+"&autoplay=1"); }); $("#myModal").on('hidden.bs.modal', function (e) { // on closing the modal // stop the video $("#myModal iframe").attr("src", null); }); 

Answer 2

Here is the JS Fiddle .

I added a bit of progressive improvement, so JS couldn’t you have hit the YouTube video in this case.

Communication requires the embedding of data and video, as well as the purpose in which we are going to add video, all that is needed is just to work. The event in the example for Bootstrap 3 modal, if you use 2.X, it will just “hide”.

 $('[data-provider="modal-video"]') .on('click', function (evt) { evt.preventDefault(); var $target = $(evt.currentTarget), videoSrc = $target.data('video-embed'), $modal = $($target.data('target')); $modal .find('iframe').attr('src', videoSrc) .end() .on('hide.bs.modal', function () { $(this) .off('hide.bs.modal') .find('iframe').attr('src', ''); }) .modal('show'); }); 

Answer 3

  <div class="close-button"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span></button> </div> $('.close').on('click', function (e) { $("#myModal iframe").attr("src", null); }); 

Answer 4

I could not find a dynamic way to deal with this problem, so I created a dynamic way to handle this for the site we are working on.

Here are the links:

 <li><a href="#" data-toggle="modal" data-target="#video1">Video: video 1</a></li> <li><a href="#" data-toggle="modal" data-target="#video2">Video: video 2</a></li> 

Here are the modalities:

 <div id="video1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <iframe width="560" height="315" src="https://www.youtube.com/embed/vidpath" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> <div id="video2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <iframe width="560" height="315" src="https://www.youtube.com/embed/vidpath2" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> 

Here is the script:

 // autoplay video functionality $( "[data-target^='#video']" ).click(function() { // get the ID of the clicked video var dataTarget = $(this).attr("data-target"); dataTarget = dataTarget.substring(1,7); var vidId = '#'+dataTarget; // get the vid src var vidSrc = $(vidId+ " iframe").attr('src'); // create the autoplay var vidSrcAuto = vidSrc+'?autoplay=1'; // get the iframe element var iframeEl = $(vidId+ " iframe"); $(vidId).on('show.bs.modal', function () { $(iframeEl).attr("src", vidSrcAuto); }); $(vidId).on('hidden.bs.modal', function (e) { $(iframeEl).attr("src", vidSrc); }); });