1

I can't use jquery or any other library due to technical limitations. My intention is to stop the Youtube video when the modal is closed. Both if i press X button or click outside the modal.

Ideas:

  • Stop video when close;
  • Mute video when close;
  • Remove video element when close (but can it be opened again?);

Hope you can help me with code.

Many thanks in advance.

JS

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

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

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

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

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

// outside, close
window.addEventListener("click", function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
});

HTML

<button id="myBtn">Watch Video</button>
<div id="myModal" class="modal" style="display: none;">
<div class="modal-content">
<span class="close">×</span>
<iframe src="https://www.youtube.com/embed/AZGcmvrTX9M" width="100%" height="360" frameborder="0"></iframe>
</div>
</div>

CSS

.btn {
cursor: pointer;
display: inline-block;
border: 0;
font-weight: bold;
padding: 10px 20px;
color: #fff;
font-size: 15px;
}

.btn:hover{
text-decoration:underline;
color: #fff;
}

.modal {
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fff;
  margin: auto;
  padding: 20px;
  width: 40%;
  border-radius:5px;
}

.close {
cursor: pointer;
color: #333;
float: right;
font-size: 28px;
font-weight: bold;
}
scholar2020
  • 13
  • 3
  • Thank you for add the code in your question. My opinion is that you have to use YouTube Iframe Player API for handle the video - in this case, you have to check how call the `player.stopVideo();` function - check the [documentation](https://developers.google.com/youtube/iframe_api_reference?hl=en) and this [question and answer](https://stackoverflow.com/q/7443578/12511801). – Marco Aurelio Fernandez Reyes Oct 01 '20 at 19:14

0 Answers0