Stop video when closing the modal container

JavaScript
1

I have a modal that a youtube is embedded in the container. When I click on “X” to close the modal, the youtube video still plays. I would like to be able to stop the video upon closing. The below JS is for closing the modal when clicking outside of the container.

Is there a way to stop the video thru JS when closing the modal.

Thank you.

 <div id="id01" class="modal">

  <div class="modal-content video">
 
    <div class="imgcontainer">
      <span onclick="document.getElementById('id01').style.display='none'" 	class="close" title="Close">&times;</span>
    </div>
    <div class="container">
        <iframe width="600" height="480" src="https://www.youtube.com/embed/youtubesvideourl" frameborder="0" allow="autoplay; encrypted-media"></iframe>
    </div>

[code]

[/code]
2

Hi there javascript7,

does this help…

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

</head>
<body> 
 <div id="id01" class="modal">
  <div class="modal-content video">
    <div class="imgcontainer">
      <span class="close" title="Close">&times;</span>
    </div>
    <div class="container">
	 <iframe src="https://www.youtube.com/embed/x3vcSab13Sk" width="600" height="480"  allowfullscreen></iframe>
	</div>
  </div>
 </div>
<script>
 ( function( w, d ) {
   'use strict';
    // Get the modal
	var el = d.getElementsByClassName( 'container' )[0];
    var modal = d.getElementById( 'id01' );
    // When the user clicks anywhere outside of the modal, close it
   w.onclick = function ( event ) {
      if ( event.target == modal ) {
           modal.style.display = 'none';
      }
   };
   d.getElementsByClassName( 'close' )[0].addEventListener( 'click',
      function() {
         d.getElementById( 'id01' ).style.display = 'none';
         while ( el.firstChild ) {
                 el.removeChild( el.firstChild ); 
	  }
   }, false );

 }( window, document ));
</script>

</body>
</html>

coothead

3

It partial works. If I just use your JS and I use my modal code between the div’s, the video stops playing when I click the “X” abut then if I want to play the video again, when you click it only shows the grayed screen with only the “X” showing and no video.

When I use all of your code, when I click to see the video, no video appears.

So I think it’s close!

Thanks

4

I did not see anyhing in the code that you posted that would open the iframe. :wonky:

coothead

5

Oh, please forgive, you are correct, I forgot that, sorry. Here is it:

<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Video Tutorial - Click here</button>
7

Hi there javascript7,

try this…

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<style media="screen">
.hide {
    display: none;
 }
</style>

</head>
<body>

<button id="openModal">Video Tutorial - Click here</button>

 <div id="id01" class="modal hide">
  <div class="modal-content video">
    <div class="imgcontainer">
      <span class="close" title="Close">&times;</span>
    </div>
    <div class="container">
	 <iframe id="ifr" src="https://www.youtube.com/embed/x3vcSab13Sk" width="600" height="480"  allowfullscreen></iframe>
	</div>
  </div>
 </div>
 
<script>
 ( function( w, d ) {
   'use strict';
   
    // Get the modal
    var modal = d.getElementById( 'id01' );
	
	var iframe =  d.getElementById( 'ifr' );

    // When the user clicks anywhere outside of the modal, close it
   w.onclick = function ( event ) {
      if ( event.target == modal ) {
           modal.style.display = 'none';
      }
   };
   d.getElementsByClassName( 'close' )[0].addEventListener( 'click',
      function() {
         modal.classList.add( 'hide' );
	 iframe.src = '';
   }, false );
   
   d.getElementById( 'openModal' ).addEventListener( 'click',
      function() {
         modal.classList.remove( 'hide' );
   	 iframe.src = 'https://www.youtube.com/embed/x3vcSab13Sk';     
	  
   }, false );   

 }( window, document ));
</script>

</body>
</html>

coothead

8

I get nothing when I click of open the video.

9

Hi there javascript7,

I get…

…and when clicked, I get…

coothead

10

You might actually use the youtube player API for this, so that you can properly pause the player rather than removing the iframe src entirely:

<div id="id01" class="modal">
  <div class="modal-content video">
    <div class="imgcontainer">
      <span class="close" title="Close">&times;</span>
    </div>
    <div class="container" id="container">
      <iframe
        id="player"
        width="560"
        height="315"
        src="https://www.youtube.com/embed/n6rTsbnpMls?enablejsapi=1"
        frameborder="0"
        allow="autoplay; encrypted-media"
        allowfullscreen
      ></iframe>
    </div>
  </div>
</div>

Note the enablejsapi=1 parameter in the iframe URL. Then include the API like so:

<script src="https://www.youtube.com/iframe_api"></script>
<script>
var modal = document.querySelector('.modal')
var closeBtn = document.querySelector('.close')
var player

// Once the API is ready, create a player object for the
// iframe with the id="player"
var onYouTubeIframeAPIReady = function () {
  player = new YT.Player('player')
}

// When the close button gets clicked, check if the player
// got already initialised, and if so, pause it.
closeBtn.addEventListener('click', function () {
  modal.style.display = 'none'

  if (player) {
    player.pauseVideo()
  }
})
</script>

This way you have full control over the player, and don’t have to load the iframe anew each time you open the modal.

2 Likes
11

Thanks, that code works good. So the above code on clicking outside of the modal doesn’t work which is fine, but want to make sure that is correct where you only close it with the “X”/

12

So… if you want the behavior to happen when you close it in another way… add the same code to the piece of code that handles closing it the other way…

13

This code does close it but the audio still continues to play (video is gone)which was the purpose of my original post. In a perfect world it would be good to have both. (“X” closes it down and clicking outside the container closes it down)

14

What @m_hutley said… my snippet was just to demonstrate how to generally pause the video, but you can of course apply that at any other point too. E.g. make the closing function reusable by assigning it to a variable:

var closeModal = function () {
  modal.style.display = 'none'

  if (player) {
    player.pauseVideo()
  }
}

closeBtn.addEventListener('click', closeModal)
// Or inside another event handler simply call:
// closeModal()
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.