Can't close Youtube video while video is loading

Question

I have a button, that when clicked, makes a youtube video show up. Above the video, i have placed a close button so that the user can close it.

Everything seems to work nicely but on mobile (with slower speed than desktop), I noticed that WHILE the video is loading, if a user decides to close it then he can't. (but once the video has started playing then clicking on the close button does close the video...)

To simulate this problem, I created a jsfiddle and invite you to open Google Chrome Dev Tools and set on the Networks tab 2G speed in order to have time to witness this phenomenon.

I don't know if it is related but to give context, I am using bootstrap 3 and 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

Your `click event` for `$(".yt-close")` inside `onStateChange` is not binding unless video starts playing. I would suggest to move this outside and try clearing the video `element/iframe` through other ways.. — Guruprasad J Rao, Feb 01 '17 at 18:26

score 2 · Accepted Answer · answered Feb 01 '17 at 19:06

2

It is noticed that your click event for $(".yt-close") inside onStateChange is not binding unless video starts playing. I would suggest to move this click event binding outside somewhere and try clearing the video element/iframe through any other possible ways.

answered Feb 01 '17 at 19:06

Guruprasad J Rao

29,410
14
101
200

Hi Rao, I have a little issue and can't reproduce it on the jsfiddle for mysterious reason. Now with your suggestion I can close the video BEFORe the onstatechange(= start of video) but the problem is that if I click again on the button, the video loads NOT from the beginning but as if it has already been moving froward (even though it was invisible since I closed video). – Mathieu Feb 02 '17 at 16:07
Follow previous comment: The solution would be to use event.target.stopVideo() as follows: $(".yt-close").click(function(){ event.target.stopVideo(); $( $(this).data("target") ).hide(); But as it is now outside function load_yt_player() (thanks to your suggestion), then it does not work, i get an error because of course event.target is not defined anymore... How can I tell the app to STOP the video when I click the close button ? – Mathieu Feb 02 '17 at 16:09
@Mathieu.. **[This SO Post](http://stackoverflow.com/questions/6671232/youtube-api-stop-video)** and **[this fiddle](http://jsfiddle.net/MadLittleMods/3J2wT/)** might get you to go with some better idea.. :) – Guruprasad J Rao Feb 02 '17 at 18:16
thanls will look at it – Mathieu Feb 03 '17 at 14:40

Can't close Youtube video while video is loading

1 Answers1