Video still playing when modal closes

Question

When I close the bootstrap modal, the video is still playing. so what I want is : when I close the bootstrap modal, the sound of the video will stop.

here is the script Js

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

and HTML code

<img id="myBtn" src="URL of button here" alt="" style="width: 70px; height:70px;" >

<div id="myModal" class="modal">
<!-- Modal content -->
    <div class="modal-content">

        <span class="close">x</span>
        <div class="videoWrapper">
            <p>
                <iframe width="640" height="360" src="https://www.youtube.com/embed/JY1ddEDcVV0?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
            </p>
        </div>
    </div>

</div

Answer 1

Ok, so here is how to do it. You will need to completely re-write your JS. You can use iframe.postMessage(); to play/pause the video. Here is an example of how to implement it:

<div id="videoWrapper">
   <iframe width="500" height="315" src="https://www.youtube.com/embed/JY1ddEDcVV0?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
   <input onClick="toggleVideo('hide');" type='button'>
</div>


<script>
function toggleVideo(state) {
    var div = document.getElementById("videoWrapper");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}','*');
}
</script>

Also you can easily change <input> to you <img>.

Many thanks to How to pause a YouTube player when hiding the iframe?

Hope this helps!

Answer 2

You can also use the YouTube API to do this, but it will also require re-writing some of your code. I have adapted the linked example for your situation below.

HTML

I have replaced the video with a placeholder div with the id player. Once the video is loaded by the YouTube API, it will replace this div. I have also added the class close to the span so we can refer to it by its class instead of the tag, which would allow you to have the X button on modals, but also use span tags elsewhere without causing conflicts.

<img id="myBtn" src="URL of button here" alt="" style="width: 70px; height:70px;" >

<div id="myModal" class="modal">
<!-- Modal content -->
    <div class="modal-content">

        <span class="close">x</span>
        <div class="videoWrapper">
            <p>
                <div id="player"></div>
            </p>
        </div>
    </div>

</div>

JavaScript

We need to do a few things:

1. Load the YouTube API

   var tag = document.createElement('script');
   tag.src = "https://www.youtube.com/iframe_api";
   var firstScriptTag = document.getElementsByTagName('script')[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
   

2. Load the video

   var player;
   function onYouTubeIframeAPIReady(){
       player = new YT.Player('player', {
             height: '390',
             width: '640',
             videoId: 'JY1ddEDcVV0',
             rel: '0',
             controls: '0',
             showinfo: '0'
           });
   });
   

3. Define the stopVideo() function

   function stopVideo() {
       player.stopVideo();
   } 
   

4. Call stopVideo() every time you close the modal. Just simply add it into your "onclick" functions. You can also do these types of functions with jQuery exclusively, which I have shown an example of with the close button.

   $(".close").click(function() {
       modal.style.display = "none";
       stopVideo();
   });
   

JavaScript all together

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
    modal.style.display = "block";
}
$(".close").click(function() {
    modal.style.display = "none";
    stopVideo();
});
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
        stopVideo();
    }
}
var player;
$( document ).ready(function() {
    player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'JY1ddEDcVV0',
          rel: '0',
          controls: '0',
          showinfo: '0'
        });
});

function stopVideo() {
  player.stopVideo();
}

Answer 3

I have found the solution very simple. I have added 1 line for span.onclick - when user click on X

span.onclick = function() {
modal.style.display = "none";

$('iframe').attr('src', ''); //line added }

But I am facing an other issue : when I close the modal, and open it again,I want to allow the video to appear again. I got an answer but not very clar for me : " I suggest you create a clone of it before letting the document show it in the first place (i.e. before it autoplays)" can somebody helps?