可以向 YouTube iframe 添加 onclick 事件吗？答案

【问题标题】：Possible to add an onclick event to a YouTube iframe?可以向 YouTube iframe 添加 onclick 事件吗？
【发布时间】：2015-06-20 20:24:10
【问题描述】：

我有一个带有 HTML5 音频播放器和嵌入式 YouTube 音乐视频的网站。我想这样当用户点击 YouTube 视频播放它时，音乐就会停止。将 iframe 包裹在

中

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

适用于 iframe 之外的一小部分像素，但在您点击实际视频时无效。有人有什么想法吗？

【问题讨论】：

标签： javascript html iframe youtube

【解决方案1】：

您应该使用YouTube IFrame API。为onStateChange 添加一个事件监听器，以便在播放器状态更改时收到通知。请参阅下面的示例代码。

<!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>

【讨论】：

【解决方案2】：

//More Refined Way to answer this question would be --
//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');
      }

【讨论】：