Das Youtube-Video kann nicht geschlossen werden, während das Video geladen wird.

Question

Ich habe eine Schaltfläche, die beim Klicken auf ein Youtube-Video zeigt. Über dem Video habe ich eine Schließen-Schaltfläche platziert, so dass der Benutzer es schließen kann.

Alles scheint gut zu funktionieren, aber auf mobilen (mit geringerer Geschwindigkeit als Desktop), bemerkte ich, dass während das Video lädt, wenn ein Benutzer beschließt, es zu schließen, dann kann er nicht. (Aber sobald das Video abgespielt hat, wird das Video geschlossen ...)

Um dieses Problem zu simulieren, habe ich eine jsfiddle erstellt und Sie eingeladen, Google Chrome Dev Tools zu öffnen und auf der Registerkarte Netzwerke festzulegen 2G Geschwindigkeit, um Zeit zu haben, dieses Phänomen zu erleben.

Ich weiß nicht, ob es verwandt ist, aber Kontext geben, verwende ich Bootstrap 3 und 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; 
} 

JSFIDDLE link

Answer 1

Es wird bemerkt, dass Ihr Klickereignis für $(".yt-close") innerhalb onStateChange nicht bindend ist, wenn das Video nicht abgespielt wird. Ich würde vorschlagen, diese click event binding irgendwo nach draußen zu verschieben und versuchen, die video element/iframe durch andere mögliche Wege zu löschen.