通过JavaScript让YouTube播放器全屏显示

Question

在让YouTube播放器通过JavaScript进入全屏模式时，我遇到了一个错误。

我有一个按钮，当它被点击时，会触发YT.Player.playVideo()方法，同时要求包含的iframe进入全屏，如下所示：

thisVid = document.getElementById("ytIframe");

if (thisVid.requestFullscreen) {
    thisVid.requestFullscreen();
}
else if (thisVid.msRequestFullscreen) {
    thisVid.msRequestFullscreen();
}
else if (thisVid.mozRequestFullScreen) {
    thisVid.mozRequestFullScreen();
}
else if (thisVid.webkitRequestFullScreen) {
    thisVid.webkitRequestFullScreen();
}

（这是使用Stack Overflow答案here和here）

iframe成功占据了屏幕，但YouTube播放器并不知道它处于全屏模式，因为右下方的全屏按钮仍然可用：

当我点击它时，它会保持全屏状态，它告诉我＆＃34; youtube.com现在是全屏＆＃34;：

这是一个问题，因为用户需要单击该按钮两次才能退出全屏模式。有没有办法告诉youtube播放器全屏，而不是只是告诉它包含iframe？

Answer 1

由于YouTube播放器实际上存在于iFrame中，因此当您使用javascript全屏API时，您将完全筛选iframe，而不是播放器。因此，就其而言，它不是全屏。让玩家进入全屏模式的唯一方法是让用户手动点击按钮（这是遗留的要求，因为iframe仍然可以包含Flash播放器，Flash有安全措施来阻止程序化全屏幕）。现在你唯一的解决方案是一个自定义控制栏（即使这样你也不会完全筛选播放器，但只是它的容器......但至少你可以控制按钮的功能）。