YouTube Player API 全屏事件答案

【问题标题】：YouTube Player API Fullscreen eventYouTube Player API 全屏事件
【发布时间】：2016-09-01 01:44:10
【问题描述】：

我想在播放器全屏时向<body> 元素添加一个类（例如yt-fullscreen）。

有没有办法让玩家何时进入全屏模式？

在文档中我没有找到任何相关的事件。

也许有办法检查播放器是否处于全屏状态？

【问题讨论】：

另见stackoverflow.com/q/24389115/32453
@rogerdpack 当然可以，但我不确定 iframe 是全屏的。

标签： javascript ytplayer

【解决方案1】：

试试这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>yt fullscreen</title>
    <script src="//code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="//cdn.rawgit.com/vincepare/iframeTracker-jquery/master/jquery.iframetracker.js"></script>
</head>
<body>
<div class="yt">
<iframe width="560" height="315" src="https://www.youtube.com/embed/C0DPdy98e4c" frameborder="0" allowfullscreen></iframe>
</div>
<script>
$(document).ready(function($){
    $('iframe').iframeTracker({
      blurCallback: function(){
        setTimeout(function(){
          if ($('iframe').width()<=560) {
            $('body').removeClass('yt-fullscreen');
          }else{
            $('body').addClass('yt-fullscreen');
          }
        }, 2000);
      }
    });
});
</script>
</body>
</html>

无法检查播放器，因为我们只获得 iframe。所以剩下的就是使用 iframe。

【讨论】：

我可以安全地假设如果width === window.innerWidth && height === window.innerHeight，那么它是全屏的。感谢您的想法。
如果用户使用键盘快捷键切换到全屏，这不起作用。