Impossible de fermer une vidéo Youtube pendant son chargement

Question

J'ai un bouton qui, lorsqu'il est cliqué, fait apparaître une vidéo YouTube. Au-dessus de la vidéo, j'ai placé un bouton de fermeture pour que l'utilisateur puisse la fermer.

Tout semble fonctionner correctement mais sur mobile (avec une vitesse plus lente que sur desktop), j'ai remarqué que pendant que la vidéo se charge, si un utilisateur décide de la fermer, il ne peut pas le faire. (mais une fois que la vidéo a commencé à jouer, le fait de cliquer sur le bouton de fermeture ferme la vidéo...)

Pour simuler ce problème, j'ai créé un jsfiddle et vous invite à ouvrir Google Chrome Dev Tools et à paramétrer sur l'onglet Réseaux la vitesse 2G afin d'avoir le temps de constater ce phénomène.

Je ne sais pas si c'est lié mais pour donner un contexte, j'utilise bootstrap 3 et jquery.

HTML

<section id="buttons">
  <a class="btn btn-primary" id="videoModal">
       <span class="title">hello</span><br/>
  </a>
</section>

<div id="container">
 <button type="button" class="yt-close" data-target="#container">×</button>
  <div id="ytplayer"></div>
</div>

JS

load_yt_player();
function load_yt_player() {
    $("#videoModal").click(function(){
      $("#video-container").fadeIn(1000);
      runPlayer( "Aph6N3FI4qI" );
    });

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

    var player;
    function runPlayer( video_id ){
      if(player) {
        player.playVideo();
        return player;
      }
      player = new YT.Player('ytplayer', {
        playerVars: {
            autoplay: 1,
          html5: 1,
          controls: 0,
          modestbranding: 1,
          showinfo: 0,
          loop: 0,
          enablejsapi: 1,
          origin: document.domain,
          fs: 1,
          wmode: "opaque"
        },
        videoId: video_id,
        events: {
          onStateChange: function (event) {           
            if(event.data === YT.PlayerState.PAUSED){
              event.target.stopVideo();
              $("#container").hide();
            }
            // On End
            if(event.data === YT.PlayerState.ENDED){
              event.target.stopVideo();
              $("#container").hide();
            }
            // On close button click
            $(".yt-close").click(function(){
              event.target.stopVideo();
              $( $(this).data("target") ).hide();
            });
          }
        }
      });
    }
  }

CSS

#buttons a {
    display: block;
    margin-bottom: 10px;
    white-space: normal;
    padding: 6px 7px;
    width: 5Opx;
}

.yt-close {
  position: absolute;
  top: 0;
  right: 0;  
}

button.yt-close {
  color: black;
  cursor: pointer;
  background: 0 0;
  border: 0;
  -webkit-appearance: none;
  display: block;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  font-size: 100px;
}

Lien JSFIDDLE

Answer 1

On remarque que votre événement de clic pour $(".yt-close") à l'intérieur onStateChange n'est pas contraignante si la vidéo ne commence pas à être lue. Je suggère de déplacer ceci click event binding à l'extérieur et essayer d'effacer le video element/iframe par tout autre moyen possible.