How to capture onclick within an iFrame for embedded YouTube video?

Question

I have an iFrame that displays an embedded youtube video.

<iframe width="560" height="315" src="http://www.youtube.com/embed/xxx" frameborder="0" allowfullscreen></iframe>

What I would like to do is somehow capture the click event when the user clicks the you tube video so that I can call an http://myserver.com/dostuff rest api to update an external server counter tracking the number of clicks and of course allow the video to play as expected.

Any information would be greatly appreciated.

just add an onclick attr or a listener to it, if you want to capture a click anywhere in the iframe — PitaJ, Aug 09 '12 at 22:56

score 4 · Answer 1 · edited May 23 '17 at 11:43

4

You can't, I believe. That would be a security risk. If you mainly want to do tracking and whatnot, you would probably be best off doing something like adding an image/button in the place of the video that the user clicks, causing the video to appear.

Edit: This solution may work too; I'm not sure if it'll work for iframes that aren't on the same domain.

edited May 23 '17 at 11:43

Community

1
1

answered Aug 09 '12 at 22:59

404 Not Found

3,635
2
28
34

score 1 · Answer 2 · answered Aug 09 '12 at 23:01

1

window.postMessage could help. But you should have an access to source code of the page you're rendering in iframe. So in case of embedding of youtube video, you probably can't deal with this.

answered Aug 09 '12 at 23:01

Eugene Naydenov

7,165
2
25
43

score 0 · Accepted Answer · edited May 23 '17 at 12:30

0

Everybody had great feedback. Thanks for all who posted. After trying some hacks the bottom line is that trapping the click event is not natively supported via html or javascript.

The best artifact and cleanest solution that I have found is here.

edited May 23 '17 at 12:30

Community

1
1

answered Aug 10 '12 at 18:17

genxgeek

13,109
38
135
217

score 0 · Answer 4 · answered Nov 01 '21 at 17:08

//Its possible by recording the stateChange in the video. 
//HTML code----

<!DOCTYPE html>
<html>
  <body>
    <div id='vidWrapper'>
    //your iframe tag goes here.
    <iframe id="video-id-first" src="https://www.youtube.com/embed/nNlEiuqiKAk?enablejsapi=1&amp;origin=http%3A%2F%2F3.7.232.244" gesture="media" allow="encrypted-media" allowfullscreen="" data-gtm-yt-inspected-53610233_3="true" width="560" height="400" frameborder="0"></iframe>
    </div>
   </body>
</html>

//JS code ----

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var width = document.getElementById("video-id-first").getAttribute("width");
var height = document.getElementById("video-id-first").getAttribute("height");
var src = document.getElementById("video-id-first").getAttribute("src");
//splitting to get the videoId from src.
var partsArr = src.split("/");
var videoSource = partsArr[partsArr.length -1 ].split("?");
var videoId = videoSource[videoSource.length -2 ];

      function onYouTubeIframeAPIReady() {
        player = new YT.Player('vidWrapper', {
          height:height,
          width: width,
          videoId: videoId,
          events: {
            'onStateChange': function(event) {
              if (event.data == YT.PlayerState.PLAYING) {
                startVideo();
              }
                if (event.data == YT.PlayerState.PAUSED) {
                stopVideo();
              }
            }
          }
        });
      }
      function startVideo() {
      //write your functionality here.
        alert('Video Started');
      }
       function stopVideo() {
       //write your functionality here.
        alert('Video Paused');
      }

How to capture onclick within an iFrame for embedded YouTube video?

4 Answers4