Execute JavaScript function when YouTube video is played (using YouTube API)

Question

I'm embedding a youtube video on my page using the following code:

<iframe width="400" height="300" id="newvid" src="http://www.youtube.com/embed/url?modestbranding=1&showinfo=0&feature=player_embedded&fs=0&iv_load_policy=3&rel=0" frameborder="0"></iframe>

I'm trying to use the Youtube API, so a javascript function will be executed once user is playing the video, but the following code doesn't work, as I don't see any alert showing when clicking the video:

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

      function onYouTubeIframeAPIReady() {
        player = new YT.Player('newvid', {
          events: {
            'onStateChange': function(event) {
              if (event.data == YT.PlayerState.PLAYING) {
                  myFunction();
              }
            }
          }
        });
      }
</script>

<script>
function myFunction() {
    alert("I am an alert box!");
}
</script>

JamesPark.ninja · Accepted Answer · 2016-10-05 15:22:45Z

1

It should be set up with a div container rather than selecting the iFrame. (This may not run correctly in the snippet container, however please try in your code).

<div id="newvid"></div>

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

      function onYouTubeIframeAPIReady() {
        player = new YT.Player('newvid', {
          height: '300',
          width: '400',
          videoId: 'SwxdBiazu8M', // Example video ID
          events: {
            'onStateChange': function(event) {
              if (event.data == YT.PlayerState.PLAYING) {
                  myFunction();
              }
            }
          }
        });
      }
</script>

<script>
function myFunction() {
    alert("I am an alert box!");
}
</script>

answered Oct 5, 2016 at 15:22

JamesPark.ninja

867 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rockyraw Over a year ago

Thanks, it works, though if that's the only way, I suppose I must use accordingly the playerVars attribute to include all the parameters i'm using,

Pranav Bilurkar · Accepted Answer · 2016-10-06 06:25:43Z

Below code demonstrates and executes JS function using enablejsapi in iframe -

<!doctype html>
<html>
<body>
<iframe id="ytplayer" type="text/html" width="640" height="390" src="https://www.youtube.com/embed/YtF6p_w-cSc?autoplay=1&controls=0&enablejsapi=1" frameborder="0"></iframe>

<script>
  // Load 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);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {  
    player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',      
      events: {
            'onStateChange': function(event) {
              if (event.data == YT.PlayerState.PLAYING) {
                  myFunction();
              }
            }
          }  
    });           
  }

  function myFunction() {
    alert("I am an alert box!");
}
</script>
</body>
</html>

Here's JSFiddle

As per the above code JS function will be called once the playerstate is PLAYING. Hope this will help you and you are looking for the same. Also, please let me know if you have any questions.

Thanks..!

Collectives™ on Stack Overflow

Execute JavaScript function when YouTube video is played (using YouTube API)

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related