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>

Where do you want to fire the event, in the iframe code, or in the parent code? — bloodyKnuckles, Jun 04 '14 at 14:15
This may help: "Get element from within an iFrame" http://stackoverflow.com/questions/1088544/javascript-get-element-from-within-an-iframe — bloodyKnuckles, Jun 04 '14 at 14:16

Luca Filosofi · Accepted Answer · 2019-12-07T22:03:14.967

24

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>

edited Dec 07 '19 at 22:03

answered Jun 04 '14 at 14:41

Luca Filosofi

30,905
9
70
77

2

Great stuff, would the process be similar for a vimeo iframe embed? – Rob Morris Jun 04 '14 at 15:02
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? – Bhavin Thummar Jun 04 '19 at 06:03
1

demo url 404 not found – huykon225 Dec 26 '21 at 04:23

Cyclonecode · Answer 2 · 2014-06-04T14:35:03.357

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

This is deprecated, don't use! – Mārtiņš Briedis Apr 04 '16 at 07:40 — Mārtiņš Briedis, Apr 04 '16 at 07:40
How should we go about it @MārtiņšBriedis? – layser Sep 08 '16 at 18:51 — layser, Sep 08 '16 at 18:51

score 3 · Answer 3 · answered Aug 14 '19 at 14:48

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;
      }

Fire an event on play of youtube iframe embed

3 Answers3

Linked