How do I stop the POP-UP video when closing the page window?

Asked

Viewed 50 times

-2

Well, I don’t have much HTML experience, I’ve tried and I can’t get the video to stop playing when closing the POP-UP window.

If anyone can help or give a hint thank you.

<!DOCTYPE html>
<html>

<head>
  <style>
    /** Donna Galletta | LIGHTBOX MARKUP **/
    
    .lightbox {
      /** Default lightbox to hidden */
      display: none;
      /** Position and style */
      position: fixed;
      z-index: 999;
      width: 100%;
      height: 100%;
      text-align: center;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.8);
    }
    
    .lightbox:target {
      /** Remove default browser outline */
      outline: none;
      /** Unhide lightbox **/
      display: block;
    }
    /** videoModal **/
    
    #videoModal {
      border-radius: 0;
      width: 100%;
      margin: auto;
    }
    
    #videoModal .modal-header {
      background: #000;
      border: 0;
      color: #fff;
      position: relative;
      height: 35px;
    }
    
    #videoModal .modal-header h3 {
      font-size: 18px;
      line-height: 22px;
      font-family: Arial, Helvetica, sans-serif;
      padding: 5px;
    }
    
    #videoModal .modal-body {
      height: 489px;
      padding: 0;
      max-height: none;
      overflow: hidden;
    }
    
    #videoModal .modal-footer:empty {
      display: none !important;
    }
    
    #videoModal .close {
      background: #DB00B8;
      color: #fff;
      font-size: 24px;
      margin: 0;
      opacity: 1;
      position: absolute;
      right: 0;
      text-shadow: none;
      top: 0;
      width: 38px;
    }
  </style>
</head>

<body>

  <!-- thumbnail wrapped in a link -->
  <a href="#img1">
    <img src="https://live.staticflickr.com/65535/50535826153_58450a4c61_o.png" height="30">
  </a>

  <!-- lightbox container hidden with CSS -->
  <div>
    <a href="#_" class="lightbox" id="img1">
      <div id="videoModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="false" style="display: block;">
        <div class="modal-header">
          <button type="button" class="close full-height" data-dismiss="modal" aria-hidden="true">X</button>
          <h3>Donna Galletta- Showreel</h3>
        </div>
        <div class="modal-body"><iframe width="100%" height="489" src="https://www.youtube.com/embed/SvuoDerqNW0" frameborder="0" allowfullscreen=""></iframe></div>
        <div class="modal-footer"></div>
      </div>
    </a>
  </div>

</body>

</html>

html css popup

1 answer

-1


Hello! To make the video stop you need to include the Youtube player API and call the function stopVideo() via javascript.

In the video link in the iframe it is necessary to add the parameter enablejsapi=1. I also added a id="player" only to facilitate the call in javascript.

<iframe id="player" width="100%" height="489" src="https://www.youtube.com/embed/g0O9XwWFa54?enablejsapi=1" frameborder="0" allowfullscreen=""></iframe></div>

Then you need to call the API frame script:

<script src="https://www.youtube.com/iframe_api"></script>

and create the script to manipulate the player:

<script>
    var player;
    
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player');
    }
    
    document.querySelector('.close').addEventListener('click', function(){
      player.stopVideo();
    });
</script>

That’s how it ended:

<!DOCTYPE html>
<html>

<head>
  <style>
    /** Donna Galletta | LIGHTBOX MARKUP **/
    
    .lightbox {
      /** Default lightbox to hidden */
      display: none;
      /** Position and style */
      position: fixed;
      z-index: 999;
      width: 100%;
      height: 100%;
      text-align: center;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.8);
    }
    
    .lightbox:target {
      /** Remove default browser outline */
      outline: none;
      /** Unhide lightbox **/
      display: block;
    }
    /** videoModal **/
    
    #videoModal {
      border-radius: 0;
      width: 100%;
      margin: auto;
    }
    
    #videoModal .modal-header {
      background: #000;
      border: 0;
      color: #fff;
      position: relative;
      height: 35px;
    }
    
    #videoModal .modal-header h3 {
      font-size: 18px;
      line-height: 22px;
      font-family: Arial, Helvetica, sans-serif;
      padding: 5px;
    }
    
    #videoModal .modal-body {
      height: 489px;
      padding: 0;
      max-height: none;
      overflow: hidden;
    }
    
    #videoModal .modal-footer:empty {
      display: none !important;
    }
    
    #videoModal .close {
      background: #DB00B8;
      color: #fff;
      font-size: 24px;
      margin: 0;
      opacity: 1;
      position: absolute;
      right: 0;
      text-shadow: none;
      top: 0;
      width: 38px;
    }
  </style>
</head>

<body>

  <!-- thumbnail wrapped in a link -->
  <a href="#img1">
    <img src="https://live.staticflickr.com/65535/50535826153_58450a4c61_o.png" height="30">
  </a>

  <!-- lightbox container hidden with CSS -->
  <div>
    <a href="#_" class="lightbox" id="img1">
      <div id="videoModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="false" style="display: block;">
        <div class="modal-header">
          <button type="button" class="close full-height" data-dismiss="modal" aria-hidden="true">X</button>
          <h3>Donna Galletta- Showreel</h3>
        </div>
        <div class="modal-body"><iframe id="player" width="100%" height="489" src="https://www.youtube.com/embed/g0O9XwWFa54?enablejsapi=1" frameborder="0" allowfullscreen=""></iframe></div>
        <div class="modal-footer"></div>
      </div>
    </a>
  </div>

    <script src="https://www.youtube.com/iframe_api"></script>
    
    <script>
        var player;
        
    //cria o player com base no iframe existente
        function onYouTubeIframeAPIReady() {
          player = new YT.Player('player');
        }
        
    //captura clique no botão fechar e para o vídeo
        document.querySelector('.close').addEventListener('click', function(){
          player.stopVideo();
        });
    </script>
</body>

</html>

Hug!

  • But if I have something like that, how do I do it? <video width="400" Controls> <source src="mov_bbb.mp4" type="video/mp4"> </video>

  • In this case, within the script, you can delete the creation part of the player and replace the player.stopVideo(); within the click event by var media = document.querySelector("#player"); media.pause(); media.currentTime = 0;. And also add a id="player" in the tag <video>

  • Thanks! Thanks for the help! It worked for me!

Browser other questions tagged html css popup

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