如何在 iFrame 中为嵌入式 YouTube 视频捕获 onclick？答案

【问题标题】：How to capture onclick within an iFrame for embedded YouTube video?如何在 iFrame 中为嵌入式 YouTube 视频捕获 onclick？
【发布时间】：2012-08-07 06:06:20
【问题描述】：

我有一个 iFrame，它显示嵌入的 youtube 视频。

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

我想要做的是以某种方式捕获用户单击 YouTube 视频时的点击事件，以便我可以调用 http://myserver.com/dostuff rest api 来更新跟踪点击次数的外部服务器计数器，当然还允许视频按预期播放。

任何信息将不胜感激。

【问题讨论】：

简短回答：您无法在 iframe 内捕获点击。
如果您想在 iframe 中的任意位置捕获点击，只需添加 onclick 属性或侦听器即可

标签： javascript html iframe

【解决方案1】：

你不能，我相信。那将是一个安全风险。如果您主要想做跟踪之类的，您可能最好做一些事情，例如在用户单击的视频的位置添加图像/按钮，从而导致视频出现。

编辑：This solution may work too;我不确定它是否适用于不在同一个域中的 iframe。

【讨论】：

【解决方案2】：

window.postMessage 可以提供帮助。但是您应该可以访问在 iframe 中呈现的页面的源代码。因此，在嵌入 youtube 视频的情况下，您可能无法处理。

【讨论】：

【解决方案3】：

每个人都得到了很好的反馈。感谢所有发帖的人。在尝试了一些技巧之后，底线是通过 html 或 javascript 原生不支持捕获点击事件。

我发现的最好的工件和最干净的解决方案是here。

【讨论】：

【解决方案4】：

//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');
      }

【讨论】：