Fire an event on play of youtube iframe embed

Question

I need to fire an event on play of a youtube iframe. So when the play button is pressed I need to call a function to hide the span.module-strip

I've tried this but maybe I'm going down the wrong path?

$("#home-latest-vid")[0].onplay = function() {
    alert('hi');
};

HTML:

<div class="module module-home-video">

    <span class="module-strip">Latest Product Video</span>

        <iframe id="video" src="http://www.youtube.com/embed/RWeFOe2Cs4k?hd=1&rel=0&autohide=1&showinfo=0&enablejsapi=1" frameborder="0" width="640" height="360"></iframe>
</div>

Solution 1

• DEMO: https://so.lucafilosofi.com/fire-an-event-on-play-of-youtube-iframe-embed/

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

<div class="module module-home-video">
    <span class="module-strip">Latest Product Video</span>
    <div id="video"></div>
</div>

<script>
    var player, playing = false;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('video', {
            height: '360',
            width: '640',
            videoId: 'RWeFOe2Cs4k',
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerStateChange(event) {

      if (event.data == YT.PlayerState.PLAYING) {
         alert('video started');
         playing = true;
        }

      else if(event.data == YT.PlayerState.PAUSED){
            alert('video paused');
            playing = false;
       }
}
</script>

Solution 2

You should be able to use the youtube javascript api, doing something like this:

var ytplayer = null;

// event that will be fired when the player is fully loaded
function onYouTubePlayerReady(pid) {
   ytplayer = document.getElementById("ytplayer");
   ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
}

// event that will be fired when the state of the player changes
function onPlayerStateChange(state) {
  // check if it's playing
  if(state == 1) {
    // is playing
  }
}

To load your video in a embedded player you would use the following url:

http://www.youtube.com/v/RWeFOe2Cs4k?version=3&enablejsapi=1

I also think you should be able to add the iframe directly like this:

<iframe id="ytplayer" type="text/html" width="640" height="360" 
 src="https://www.youtube.com/embed/RWeFOe2Cs4k?enablejsapi=1"
 frameborder="0" allowfullscreen>

Reference: Youtube Javascript Player API

Solution 3

player.getPlayerState():Number Returns the state of the player.

https://developers.google.com/youtube/iframe_api_reference

 /* 
      * player.getPlayerState():Number
      *
      * -1 – unstarted
      *  0 – ended
      * 1 – playing
      *  2 – paused
      *  3 – buffering
      *  5 – video cued
      *
      */
      function checkIfPlaying(){
        var playerStatus = player.getPlayerState();

         return  playerStatus == 1;
      } 

Comments

[Rob Morris]

Great stuff, would the process be similar for a vimeo iframe embed?

[Mārtiņš Briedis]

This is deprecated, don't use!

[layser]

How should we go about it @MārtiņšBriedis?

[Bhavin Thummar]

How can we do this with multiple iframes which is listed so we did not require to add height, width and video id parameter because those are already provided in the html iframe tag? So how can I manage this all iframe video link with this jquery?

[huykon225]

demo url 404 not found