嵌入的 Youtube 视频全屏或导致调整大小

Question

我正在构建一个主页，它根据窗口宽度自动重新定位元素。问题是一个元素“player”中有一个 YouTube 视频。我希望用户能够全屏播放 YouTube 视频，但在单击全屏后，窗口大小调整会被捕获，并且“播放器”元素会重新定位，从而取消全屏。

此外，当在移动设备上查看此主页时，任何滚动都会因某种原因触发相同的功能。我想解决这两个问题。

这是JS代码：

$(window).resize(function() {
    var player = $('.header-11-sub .player');
    if ($(window).width() < 751) {
        $('.header-11-sub .signup-form').before(player);
        $('.header-11-sub .player-wrapper').hide();
    } else {
        $('.header-11-sub .player-wrapper').append(player);
        $('.header-11-sub .player-wrapper').show();
    }
});

Answer 1

当浏览器进入和退出全屏模式时，浏览器将触发调整大小事件。这是目前 Chrome 和 Firefox 的行为。

https://developer.mozilla.org/en-US/docs/Web/API/Window.fullScreen https://code.google.com/p/chromium/issues/detail?id=238803