Twitter Bootstrap Modal Stop Youtube Video

Question

I am very new to javascript and trying to use the Twitter loading tray to quickly and quickly find a good site. I know this has something to do with jquery, but I'm not sure how to stop my video when I click the close button or close icon.

Can someone explain how I can make my video stop playing, because even when I close the window, I still hear it in the background.

<!-- Button to trigger modal --> <a href="#myModal" role="button" class="btn" data-toggle="modal"><img src="img/play.png"></a> <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role=labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria>×</button> <h3 id="myModalLabel">I am the header</h3> </div> <div class="modal-body"> <p><iframe width="100%" height="315" src="http:com/embed/662KGcqjT5Q" frameborder="0" allowfullscreen></iframe></p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> </div> </div> 

Answer 1

There is a good right way to do this - see comments in the approved answer to this post .

I couldn't get this to work around me for the first time, although I was in a hurry, so I made a pretty terrible hacker code that does the trick.

This snippet "updates" the src of the inline iframe, causing it to reload:

 jQuery(".modal-backdrop, #myModal .close, #myModal .btn").live("click", function() { jQuery("#myModal iframe").attr("src", jQuery("#myModal iframe").attr("src")); }); 

Answer 2

I know I'm 2+ years late, but a few things have changed since then, and B3 is a new way to do this out of the box:

 $("#myModal").on('hidden.bs.modal', function (e) { $("#myModal iframe").attr("src", $("#myModal iframe").attr("src")); }); 

Have fun with Bootstrap!

Answer 3

If anyone else has a problem, try this, this worked for me:

 $(document).ready(function(){ $('.modal').each(function(){ var src = $(this).find('iframe').attr('src'); $(this).on('click', function(){ $(this).find('iframe').attr('src', ''); $(this).find('iframe').attr('src', src); }); }); }); 

Answer 4

Here is a simple way that I found to play a video in a modal window and then stop the game when closing.

Use .html to load the iFrame with your video into the modal body when the modal is shown, and then replace the modal body with nothing when it is hidden.

 $('#myModal').on('show', function () { $('div.modal-body').html('YouTube iFrame goes here'); }); $('#myModal').on('hide', function () { $('div.modal-body').html(''); }); 

Here is a jsfiddle example:

http://jsfiddle.net/WrrM3/87/

Answer 5

Here I summarize @guillesalazar's answer.

This will reset any iFrame in any modal bootstrap (when the modal is closed):

 $(function(){ $("body").on('hidden.bs.modal', function (e) { var $iframes = $(e.target).find("iframe"); $iframes.each(function(index, iframe){ $(iframe).attr("src", $(iframe).attr("src")); }); }); }); 

Add this to your layout and you are set up.

UPDATE: Code changed for modals with multiple iFrames.

Answer 6

You must first remove the iframe src, and then configure it again.

So my working answer is:

 $('#myModal').on('hidden.bs.modal', function () { var src = $(this).find('iframe').attr('src'); $(this).find('iframe').attr('src', ''); $(this).find('iframe').attr('src', src); }); 

October 2014. For Bootstrap 3.

Answer 7

Here is my solution, it solves the following bootstrap event calls:

• Auto play movie when showing modal
• Stop movie when modal is hidden

HTML carousel inside modal, first active element is iframe video

 <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal</button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="fill"> <iframe id="videoIframe" width="100%" height="100%" src="https://www.youtube.com/embed/UVAjm8b7YFg?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </div> </div> </div> </div> </div> 

Javascript auto play when displaying modal, then reset url and reapply iframe src

 $('#myModal').on('show.bs.modal', function() { $("#videoIframe")[0].src += "&autoplay=1"; }); $('#myModal').on('hidden.bs.modal', function(e) { var rawVideoURL = $("#videoIframe")[0].src; rawVideoURL = rawVideoURL.replace("&autoplay=1", ""); $("#videoIframe")[0].src = rawVideoURL; }); 

Answer 8

It was modal with many videos. Updated @guillesalazar code to close multiple videos in modal mode.

 $("#myModal").on('hidden.bs.modal', function (e) { $("#myModal iframe").each(function () { $(this).attr("src", ''); }); }); 

Answer 9

This does it perfectly:

 $("#myModal").on("hidden.bs.modal", function(t) { var o = $(t.target).find("iframe"); o.each(function(t, o) { $(o).attr("src", $(o).attr("src")) }); }); 

If you want it to start when the modal mode opens / stops when it closes, use this code:

But don't forget to add enablejsapi=1 to your src, for example:

 <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_CODE?rel=0&amp;controls=0&amp;showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe> function playStopVideo() { var youtubeFunc =''; var outerDiv = $("#myModal"); var youtubeIframe = outerDiv.find("iframe")[0].contentWindow; outerDiv.on('hidden.bs.modal', function (e) { youtubeFunc = 'stopVideo'; youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*'); }); outerDiv.on('shown.bs.modal', function (e) { youtubeFunc = 'playVideo'; youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*'); }); } playStopVideo(); 

Answer 10

I used a combination of Ruslanas Balčiūnas and Nathan Macfarland answered the code with something that worked for me,

 $('#myModal').on('hide',function(){ $('.modal-body iframe').attr('src',''); }); 

Thus, basically this means that the src iframe attribute fails when a modal event closes. Briefly and clearly.

Answer 11

My solution that works for Bootstrap 3 and the modern YouTube embed format is as follows.

Assuming your video is built into standard Bootstrap 3 Modal with id="#video-modal" , this simple Javascript bit will do the job.

 $(document).ready(function(){ $("#video-modal").on('hide.bs.modal', function(evt){ var player = $(evt.target).find('iframe'), vidSrc = player.prop('src'); player.prop('src', ''); // to force it to pause player.prop('src', vidSrc); }); }); 

I saw suggested solutions to this problem related to the use of the YouTube API , but if your site is not an https site, or your video is embedded in a modern format recommended by YouTube, or if you have no-cookies , then these solutions do not work, and instead of your video you get the effect of "TV in the dead channel."

I tested above in every browser I could rely on, and it works very reliably.

Answer 12

Turning to Guille, answer above, this is a return function that will work with Bootstrap 3, the latest version of youtube from August 14, and works for several videos / modals on one page,

 $(".modal").on('hidden.bs.modal', function(e) { $iframe = $(this).find( "iframe" ); $iframe.attr("src", $iframe.attr("src")); }); 

Answer 13

A much simpler way than all of these answers is to simply replace the entire SRC. This works for all modals, and you can customize the iframe class as needed.

 $('.modal').on('hidden.bs.modal', function(e) { var closestIframe = $(e.currentTarget).find('iframe'); var rawVideoURL = $("iframe")[0].src; closestIframe[0].src = ""; closestIframe[0].src = rawVideoURL; }); 

Answer 14

 $('#myModal').on('hide', function () { $('#video_player')[0].stopVideo(); }) 

Answer 15

@guillesalazaar's answer was only the 1st half of my correction, so I felt compelled to share my situation if this helps someone in the future. I also have a youtube video embedded, but I set it to play automatically when the frame is loaded using autoplay=1 . To get around the auto-play issue when the page loads, I have a YouTube URL that is stored in a variable that sets the iframe source using a click handler. To solve this problem, I simply deleted the attribute source link:

My url to launch modal window:

  <div id="movieClick" class="text-center winner"> <a href="#" data-toggle="modal" data-keyboard="true" data-target="#movie"> </div> 

My hidden modal window divs:

 <div id="movie" class="modal fade" role="dialog" tabindex='-1'> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">They Live (1988)</h4> </div> <div class="modal-body"> <iframe id="onscreen" width="100%" height="460px" src="" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </div> 

My JS:

 $("#movieClick").click(function(){ var theLink = "https://www.youtube.com/embed/Wp_K8prLfso?autoplay=1&rel=0"; document.getElementById("onscreen").src = theLink; }); // really annoying to play in the Background...this disables the link $("#movie").on('hidden.bs.modal', function (e) { $("#movie iframe").attr("src", ''); }); 

Answer 16

  //stop youtube video on modal close $('.modal').on('hidden.bs.modal', function () { var iframVideo = $('.modal').find('iframe'); $(iframVideo).attr("src", $(iframVideo).attr("src")); }); 

Answer 17

My solution for 2 or more videos on Youtube using the HTML data- * attribute . The video automatically plays and stops when the modal opens and closes.

 <button data-url="https://www.youtube.com/embed/C0DPdy98e4c" data-toggle="modal" data-target="#mymodal">Video 1</button> <button data-url="https://www.youtube.com/embed/ScMzIvxBSi4" data-toggle="modal" data-target="#mymodal">Video 2</button> <!-- Modal --> <div id="mymodal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button> </div> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> </div> </div> 

 $('.modal').on('show.bs.modal', function (event) { $(this).find('iframe').attr("src", $(event.relatedTarget).data('url') ); }); $('.modal').on('hidden.bs.modal', function (e) { $(this).find('iframe').attr("src", ""); }); 

Here is the Codepen demo: https://codepen.io/danielblazquez/pen/oOxRJq

Answer 18

For angular or dynamic HTML, or if we have multiple iframes, use as below

 $("#myModal").on('hidden.bs.modal', function (e) { $("#myModal iframe").each(function(){ $(this).attr("src", $(this).attr("src")); }); });