Search code examples
javascripthtmliframeyoutube

Possible to add an onclick event to a YouTube iframe?

I've got a site with an HTML5 audio player and embedded YouTube music videos. I'd like to make it so that when the user clicks on a YouTube video to play it the music will stop. Wrapping the iframe in

<div id='vidWrapper' onclick='pauseAudio()'>YT stuff</div>

works for the sliver of pixels outside of the iframe, but not when you click on the actual video. Anyone have any ideas?

Solution

  • You should use the YouTube IFrame API. Add an event listener for onStateChange to get notified when the player's state changes. See the sample code below.

    <!DOCTYPE html>
<html>
  <head>
    <script src="https://www.youtube.com/iframe_api"></script>
  </head>
  <body>
    <div id='vidWrapper'>
      <!-- The <iframe> (and video player) will replace this <div> tag. -->
      <div id="ytplayer"></div>
    </div>

    <script>
      var player;

      function onYouTubeIframeAPIReady() {
        player = new YT.Player('ytplayer', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onStateChange': function(event) {
              if (event.data == YT.PlayerState.PLAYING) {
                pauseAudio();
              }
            }
          }
        });
      }

      function pauseAudio() {
        ...
      }
    </script>
  </body>
</html>