如何创建全屏 youtube 嵌入视频单击 youtube 的 ytp-large-play-button 类？

Question

我想在用户单击 ytp-large-play-button 类的 svg 或嵌入的 youtube 视频时自动播放全屏视频。我怎么能在jquery中做到这一点？我不想点击“全屏”。对不起我的英语。

Answer 1

浏览器设计者，如谷歌、Mozilla 等，在安全方面变得越来越偏执，这是有道理的；然而，它迫使我从事创造性的编程，以使事情按应有的方式工作。

您忽略了两个主要的安全问题：

1. YouTube 嵌入（从技术上讲是 iframe 而不是 embed 标签）不支持跨域。这意味着我不能在入侵您的网络浏览器的情况下，在他们的 iFrame 中创建点击事件。
2. 全屏必须由 trusted 事件触发。受信任的事件必须由用户发起，例如 click。

我们可以通过创建一个完全透明并位于播放器顶部的重叠 div (#wrapper) 来绕过这两个限制 (iframe#ytplayer)。我们可以在重叠的 div 上监听 click 事件，然后从（受信任的）click 事件请求全屏。我们也可以使用 YouTube 的 API 播放视频。

工作代码笔：https://codepen.io/anon/pen/dmGgmx

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.youtube.com/player_api"></script>
<div class="container">
  <div id="wrapper"></div>
  <div id="ytplayer"></div>
</div>

CSS

.container {
  position:relative;
  overflow:hidden;
  display:inline-block;
}

#wrapper {
  z-index:1;
  cursor:pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
}

JavaScript：

var player;
function onYouTubePlayerAPIReady() {
  player = new YT.Player('ytplayer', {
    height: '360',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onReady
    }
  });
}

function onReady() {
  $("#wrapper").click(function () {
    var iframe = $("#ytplayer")[0];
    player.playVideo();
    $(this).remove();
    var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
    if (requestFullScreen) {
      requestFullScreen.bind(iframe)();
    }
  });
}