How to stop playing a video from an iframe when closing modal?

Asked

Viewed 58 times

1

Well, I’m beginner in web pages I got the code below but all the efforts I try I can not make a universal code to close all kinds of iframe close along with the modal, if anyone can help I would appreciate.

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
 modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
 modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
 if (event.target == modal) {
 modal.style.display = "none";
 }
}
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 1; /* Sit on top */
 padding-top: 25px; /* Location of the box */
 left: 0;
 top: 0;
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(0,0,0); /* Fallback color */
 background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
 background-color: #fefefe;
 margin: auto;
 padding: 20px;
 border: 1px solid #888;
 width: 80%;
}

/* The Close Button */
.close {
 color: #aaaaaa;
 float: right;
 font-size: 28px;
 font-weight: bold;
}

.close:hover,
.close:focus {
 color: #000;
 text-decoration: none;
 cursor: pointer;
}

.container {
 position: relative;
 width: 100%;
 overflow: hidden;
 padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 width: 100%;
 height: 100%;
 border: none;
}
<!DOCTYPE html>
<html>

<span id="myBtn"><img style="position: absolute; left: 145px; top: 100px;" title="Trailer" src="https://live.staticflickr.com/65535/50535826153_58450a4c61_o.png" alt="Video" width="25" height="25" /></span>

<!-- lightbox container hidden with CSS -->
<!-- The Modal -->
<div id="myModal" class="modal">

 <!-- Modal content -->
 <div class="modal-content">
 <span class="close">&times;</span>
 <h3>Teste Titulo Video</h3>
 <div class="container"><iframe class="responsive-iframe" width="560" height="315" src="http://www.mobypicture.com/embed?url=http://moby.to/xznwce" frameborder="0" allowfullscreen></iframe></div>
 </div>

</div>

</body>
</html>

html css modal

1 answer

1


There is a way to do this by just resetting the attribute src of iframe, and this will end the video playback. In your case, with the function in the following code snippet:

window.onclick = function(event) {
 if (event.target == modal) {
 modal.style.display = "none";
 }
}

We can select the iframe and reset the value of src every time the user clicks outside the iframe. You can adapt to when the X modal. The script would look like this:

// seleciona o iframe
var iframe = document.getElementsByClassName('responsive-iframe')[0];

// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = 'none';

    // aqui o ocorre o reset que fará com que seja parada a reprodução do vídeo.
    iframe.setAttribute('src', iframe.getAttribute('src'));
  }
};

In the case of the button to close the modal, basically it would be the same thing:

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

  // semelhante ao exemplo anterior
  iframe.setAttribute('src', iframe.getAttribute('src'));
};

Complete code for the test:

iframe does not run the video in Stackoverflow, it’s just a complete example to test on your machine...

var modal = document.getElementById('myModal');

// seleciona o iframe
var iframe = document.getElementsByClassName('responsive-iframe')[0];

// Get the button that opens the modal
var btn = document.getElementById('myBtn');

// Get the <span> element that closes the modal
var span = document.getElementsByClassName('close')[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = 'block';
};

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = 'none';
  iframe.setAttribute('src', iframe.getAttribute('src'));
};

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = 'none';

    iframe.setAttribute('src', iframe.getAttribute('src'));
  }
};
body {
  font-family: Arial, Helvetica, sans-serif;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 25px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
<!DOCTYPE html>
<html>
<style>

</style>
<span id="myBtn"><img
      style="position: absolute; left: 145px; top: 100px"
      title="Trailer"
      src="https://live.staticflickr.com/65535/50535826153_58450a4c61_o.png"
      alt="Video"
      width="25"
      height="25"
  /></span>

<body>
  <!-- lightbox container hidden with CSS -->
  <!-- The Modal -->
  <div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
      <span class="close">&times;</span>
      <h3>Teste Titulo Video</h3>
      <div class="container">
        <iframe class="responsive-iframe" width="560" height="315" src="http://www.mobypicture.com/embed?url=http://moby.to/xznwce" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</body>

</html>

Obviously, it is possible to create a function that would be responsible for interrupting iframes, so that it is possible to reuse it in various parts of the code, something like:

// "className" pode ser qualquer classe de qualquer iframe no HTML
function stopIframeExecution(className) {
  var iframe = document.getElementsByClassName(className)[0];
  var iframeSrc = iframe.getAttribute('src');

  iframe.setAttribute('src', iframeSrc);
}

That can be reused in several parts of the code:

// When the user clicks on <span> (x), close the modal
span.onclick = function () {
  modal.style.display = 'none';
  stopIframeExecution('responsive-iframe');
};

// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = 'none';

    stopIframeExecution('responsive-iframe');
  }
};

  • Thank you is what I needed. Vlw even.

  • In case you have a video like "<video id="player" class="Responsive-iframe" width="560" height="315" Controls><source src="video.mp4" type="video/mp4"></video>", I added the code "<script> var player; //capture click the close button and for the video Document.querySelector('.close'). addeventlistener('click', Function(){ var media = Document.querySelector("#player"); media.pause(); media.currentTime = 0; }); </script>" to stop the video, but how do I stop the video when clicking outside the modal?

  • @kastenjhonnes you call that same function(){ var media = document.querySelector("#player"); media.pause(); media.currentTime = 0; }); within the if (event.target == modal). From what you can understand from your code, every time we click out of the modal, he gets into this if, then just call that function inside.

  • Thank you! It worked.

  • Good afternoon! Just one more help please. I need the code to put in more than one video on the page as I can change the ID "id="myBtn" to a class?

Browser other questions tagged html css modal

You are not signed in. Login or sign up in order to post.