Check if YouTube video is playing and run script

Question

I have the following video embeded within WordPress

<iframe id="video" width="640" height="360" src="http://www.youtube.com/embed/xxxxxx?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

And it's inside a SlideDeck slider, which I want to stop when someone clicks the video. I can't figure out how to get this line of code

self.pauseAutoPlay = true;

to run when the video is playing.

I desperately need some help please.

Edit: As I'm not the end user. I need something that will work with the default embed code from YouTube.

score 22 · Accepted Answer · answered Jan 21 '12 at 19:38

You need to use the YouTube iFrame API. Keep in mind, I know just the bare basics of Javascript and so on so this could potentially be a lot more efficient.

You them embed your iframe as you normally would

<iframe id="player" width="640" height="360" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowfullscreen></iframe>

But with a couple changes. It needs to have an ID, 'player', and you need to append ?enablejsapi to the end of the source URI.

You'll then need to run the following script to load the API JS as well as creat the player

// 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "http://www.youtube.com/player_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 onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'u1zgFlCw8Aw',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

Notice that new YT.Player('player' should match your iframe ID and that videoId: 'u1zgFlCw8Aw' should match the src URI.

After this you'll be able to run scripts like

var myPlayerState;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          // DO THIS
        }
        myPlayerState = event.data;
      }

if (myPlayerState == 1){
  // PAUSE SLIDER
}

@nicogaldo This answer is about 4 years old at this point. You may want to try search a bit more. Can try looking at this answer http://stackoverflow.com/a/24040526/142410 — Vian Esterhuizen, Feb 19 '16 at 19:30

score 8 · Answer 2 · answered Jan 21 '12 at 02:28

You need embed youtube direct with flash:

http://code.google.com/apis/youtube/js_api_reference.html#Embedding

after that, you can use youtube javascript API.

Your code could be something like that:

<script type="text/javascript" src="swfobject.js"></script>    
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>

<script type="text/javascript">

var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer&version=3",
                   "ytapiplayer", "425", "356", "8", null, null, params, atts);


var player;

function onytplayerStateChange(newState) {
    if (newState == 1)
        callPlay();
    else if (newState == 2)
        callPause();
}

function callPlay() {
    //video is play
}

function callPause() {
    //video is paused
}

</script>

P.S. swfobject.js soure you can find here

Thanks for the suggestion but that doesn't seem to cooperate with WordPress really good. I'm also hoping for a solution that doesn't require a workaround, as I'm not the end user. I need something that will work with the default embed code from YouTube. — Vian Esterhuizen, Jan 21 '12 at 02:35
You can try: [iframe API](http://code.google.com/apis/youtube/iframe_api_reference.html#Events). But I dont have any experience with that — neworld, Jan 21 '12 at 02:36

Check if YouTube video is playing and run script

2 Answers2

Linked