Youtube video still playing when Bootstrap Modal closes

Question

I am creating a website with bootstrap, which can be found here - http://www.branchingouteurope.com/digital-spark-testing/

If you select a video image, you will see a modal window open the youtube video. The problem is that when the modal window is closed, the video continues to play. I want this video to stop when the modal window is closed.

I looked online and read many solutions, however none of them work. Here is the mark ...

<span class="main_video"> <div data-toggle="modal" data-target="#myModal" style="cursor:pointer"> <img src="img/master/video.fw.png" height="81%" width="60%" alt="Digital Spark Video"/> </div> </span> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> </div> <div class="modal-body"> <iframe width="100%" height="100%" src="//www.youtube.com/embed/sIFYPQjYhv8?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div> 

`

Answer 1

Testing here in FireFox 26.0 works as expected. When I either close Modal or marry him and then open it again - the video returns to start and stop.

EDIT 1

Played in Chrome, the video really continues to play after Modal closes.

Try these already answered questions.

Stop YouTube video using jquery?

Twitter Bootstrap Modal Stop Youtube Video

It’s best to use the YouTube API to stop the video. The answer that uses this method is available in the questions above.

EDIT 2

This solution works.

First, get JS from this post: YouTube iframe API: how can I control an iframe player that is already in HTML? and enable it on the page.

Add this JS after you have downloaded the above script (immediately before the closing body tag)

 <script type="text/javascript"> $('#myModal').on('hidden.bs.modal', function () { callPlayer('yt-player', 'stopVideo'); }); </script> 

You will also need to add an identifier to the div containing the iframe, as shown below

 <div class="modal-body" id="yt-player"> <iframe src="//www.youtube.com/embed/sIFYPQjYhv8?rel=0&enablejsapi=1" allowfullscreen="" width="100%" frameborder="0" height="100%"></iframe> </div> 

Answer 2

Here's a bit easier answer based on the dizarter version and one of the solutions it refers to.

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

Answer 3

take a look at my code I did not need to use any API

 // on preview show iframe $('#myModalPrev').on('show.bs.modal', function (e) { var idVideo = $(e.relatedTarget).data('id'); $('#myModalPrev .modal-body').html('<iframe width="100%" height="400px" src="https://www.youtube.com/embed/' + idVideo + '?autoplay=true" frameborder="0" allowfullscreen></iframe>'); }); //on close remove $('#myModalPrev').on('hidden.bs.modal', function () { $('#myModalPrev .modal-body').empty(); }); 

Answer 4

And if I like it when you want the video to be autoplay, and then to stop it when you click the “Modify Bootstrap” button, you need to do something like this:

 $('.modal-iframe-youtube').click(function (e) { e.preventDefault(); var sitetypeHref = $(this).attr('href'); var sitetypeHrefAuto = sitetypeHref + "?autoplay=1" //sitetypeHref = sitetypeHref.replace('watch?v=', 'v/'); $('#modal-window-iframe-youtube').on('shown.bs.modal', function () { var iFrame = $(this).find("iframe"); iFrame.attr("src", sitetypeHrefAuto); }); $("#modal-window-iframe-youtube").on('hidden.bs.modal', function () { var iFrame = $(this).find("iframe"); iFrame.attr("src", sitetypeHref); }); $('#modal-window-iframe-youtube').modal({ show: true }); }); 

Note that I am adding "? Autoplay = 1" arg dynamically. Hope that helps someone.

Answer 5

Here is an alternative for CloudKiller's answer, which actually works with autoplay, just change .attr to .removeAttr like this:

 jQuery('#myModal iframe').removeAttr("src", jQuery("#myModal iframe").removeAttr("src")); 

But an even more miniature / simplified version is to simply replace src with an empty value:

 $('#myModal iframe').attr('src', ''); 

So the only code that needs to be added for this is:

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

Answer 6

To write efficient code, first of all, we need to check the readiness of the DOM that the iframe exists or not, if it exists, so go to the next level, otherwise do nothing. I also used a trap.

 $("#myModal").on("hidden.bs.modal", function() { var _this = this, youtubeSrc = $(_this).find("iframe").attr("src"); if($(_this).find("iframe").length > 0){ // checking if there is iframe only then it will go to next level $(_this).find("iframe").attr("src", ""); // removing src on runtime to stop video $(_this).find("iframe").attr("src", youtubeSrc); // again passing youtube src value to iframe } } 

Answer 7

This is the solution that worked for me (a bit hacked):

First, I wrapped an iframe div named "VideoId" as follows:

 <div id="VideoId" style="position: relative; padding: 25px; height: 0;"> <iframe style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" src="//www.youtube.com/etc..." frameborder="0" allowfullscreen> </iframe> </div> 

Then I made this function:

 function CloseVideo(){ document.getElementById("VideoId").innerHTML=" "; }; 

And finally, when closing my Panel button (it was fashionable in my case), I added an oncklick event that calls my function, for example:

 <button type="button" class="btn pull-right" onclick="CloseVideo();" data-dismiss="modal">Back</button> 

Of course, if you want to call it again, you must replenish the contents of the VideoId with javascript as follows:

 document.getElementById("VideoId").innertHTML= '<iframe style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"+ 'src="//www.youtube.com/etc..."'+ 'frameborder="0"'+ 'allowfullscreen>'+ '</iframe>'; 

It works great in Chrome, Firefox, IE, and Opera.

PS I tried to remove the div directly from the onclick call, but it continued to report the missing bracket - I don't know why ...

Answer 8

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of Embedding YouTube Video inside Bootstrap Modal</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style type="text/css"> .bs-example{ margin: 20px; } .modal-content iframe{ margin: 0 auto; display: block; } </style> <script type="text/javascript"> $(document).ready(function(){ /* Get iframe src attribute value ie YouTube video url and store it in a variable */ $("#myModal").modal('show'); var url = $("#cartoonVideo").attr('src'); /* Assign empty url value to the iframe src attribute when modal hide, which stop the video playing */ $("#myModal").on('hide.bs.modal', function(){ $("#cartoonVideo").attr('src', ''); }); /* Assign the initially stored url back to the iframe src attribute when modal is displayed again */ $("#myModal").on('show.bs.modal', function(){ $("#cartoonVideo").attr('src', url); }); }); </script> </head> <body> <div class="bs-example"> <!-- Button HTML (to Trigger Modal) --> <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a> <!-- Modal HTML --> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">YouTube Video</h4> </div> <div class="modal-body"> <iframe id="cartoonVideo" width="560" height="315" src="https://www.youtube.com/embed/LGWqUVFrfU4?autoplay=1&modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </div> </div> </body> </html> 

repeat this code check. It works for me beautifully.