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

Question

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

Answer 1

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

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

1. YouTube embeds (从技术上讲，它是一个iframe，而不是embed标记)不支持跨源。这意味着我不能攻击你的网络浏览器，在他们的iFrame.
2. Full-screen中创建一个点击事件，必须由trusted事件触发。可信事件必须由用户发起，如click.

我们可以通过创建一个完全透明并位于播放器(iframe#ytplayer)之上的重叠div (#wrapper)来绕过这两个限制。我们可以在重叠的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)();
    }
  });
}