CODEWITHSUNDEEP
jqueryyoutubewordpressyoutube-api
user2636556
user2636556

Reputation: 1915

Detect when youtube video stops playing - Global Method

I'm using Wordpress, and I already have a lot of posts with Youtube videos embedded. How do I detect when a video has stopped playing, without rewriting all of my posts?

I know you could use the Youtube player API (below)

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

but in all my posts I have the videos embedded like this:

<iframe width="640" height="390" frameborder="0" type="text/html" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>

This is what I've done so far. -(Link)

onYouTubePlayerReady();

function onYouTubePlayerReady() {
  //ytplayer = document.getElementById(playerId);
    ytplayer = $('iframe[src^="http://youtube.com/embed/"]');
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
   if(newState==YT.PlayerState.ENDED){
        alert('stop');
   }
}

I don't want to go through all my posts and edit them one by one. Is there a way I could do a global hook on all my embedded videos?

Upvotes: 4

Views: 6594

Answers (1)

Timothy Barmann
Timothy Barmann

Reputation: 608

As far as I know, you can't use the Youtube API to detect player changes when you have already embedded the video with an iframe.

So one solution is to use jQuery to find the iframe, get the video id from the src attribute, remove the iframe, then let the Youtube API embed the video again in the same place. I've rewritten your code and that should get you started. You may be able to insert the code in some sort of global template so it will work on each blog item.

(I wasn't able to get this to work on FiddleJS but it works fine saving the code as a local file.)

    <html>
    <body>
    <iframe width="640" height="390" frameborder="0" type="text/html" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>


    <script type="text/javascript">

    function getVideoID(){
        var videoIframe =  $('iframe');
        var videoURL = videoIframe.attr('src');
        var id = videoURL.split("/")[4].split("?")[0];
        videoIframe.after('<div id="player"></div>');
        videoIframe.remove();
        return (id);
    }

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
       var videoID = getVideoID();
       player = new YT.Player('player', {
       height: '195',
       width: '320',
       videoId: videoID,
       events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
           }
        });

          function onPlayerReady(event) {
              event.target.playVideo();
          }

          function onPlayerStateChange(event) {
           var state = event.target.getPlayerState();
            if (state === 2) {
                alert("Paused");
            }
             else if (state === 0) {
                alert("Ended");
             }
            }
          }
    </script>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">"></script>
    <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>


    </body>
    </html>

Upvotes: 1

Related Questions