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

我正在建立一个主页，根据窗口宽度自动重新定位元素。问题是有一个元素“播放器”中有一个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();
    }
});

$（窗口）。调整大小（函数（）{
var player=$（'.header-11-sub.player'）；
如果（$（窗口）.width（）<751）{
$（'header-11-sub.signup form'）。在（玩家）之前；
$（'.header-11-sub.player包装器'）.hide（）；
}否则{
$（'.header-11-sub.player wrapper'）.append（player）；
$（'.header-11-sub.player包装器'）.show（）；
}
});

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

---

您提到了两个问题，下面是我如何解决这两个问题的（在其他答案等的帮助下）：

1修复“在移动设备上，任何滚动都会触发[调整大小]”：

我们通过跟踪

windowWidth

来实现这一点，并且只在

windowWidth

发生变化时触发实际调整大小所需的操作。如果用户正在拖动，我还会使用一个小延迟（800毫秒）来等待用户完成调整大小

function doneResizing() {
    something.refresh();
};

//Call doneResizing on re-size of the window
var windowWidth = $(window).width();

$(window).resize(function(){
    // Check width has actually changed (not just iOS
    // triggering resize event on scroll)
    if ($(window).width() != windowWidth) {
        // Update the window width for next time
        windowWidth = $(window).width();
        clearTimeout(id);
        id = setTimeout(doneResizing, 800);
    }
});

2“我希望用户能够全屏播放YouTube视频…”

跟踪用户是否处于全屏模式（使用

var fullscreen=false；

和

fullscreenchange

等），并且仅在不处于全屏模式时执行调整大小的操作：

var fullscreen = false;

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
  fullscreen = (window.screenTop == 0 && window.screenY == 0);
});

$(window).resize(function(){
    if (!fullscreen) {
        // resizing stuff
    }
});

3.现在大家一起：

function doneResizing() {
    something.refresh();
};

var id; // used for doneResizing clearTimeout
var fullscreen = false;

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    fullscreen = (window.screenTop == 0 && window.screenY == 0);
});

//Call doneResizing on re-size of the window
var windowWidth = $(window).width();

$(window).resize(function(){
    if (!fullscreen) {
        // Check width has actually changed (not just iOS triggering resize event on scroll)
        if ($(window).width() != windowWidth) {
            windowWidth = $(window).width(); // Update the window width for next time
            clearTimeout(id);
            id = setTimeout(doneResizing, 800);
        }
    }
});

---

我在发展过程中也遇到了这个问题。 我用相当简单的解决方案修复了它-将

video

元素（

iframe

包含视频，如果它不是来自原点）的高度与

screen.height

进行比较，后者是显示器的高度。如果它们是相同的，那么就忽略新鲜的

var heights = $("iframe").map(function() {
    return $(this).height();
}).get();

maxHeight = Math.max.apply(null, heights);
// find the maximum height among videos
if(maxHeight != screen.height) {
    location.reload();
}

---

是的，但我正在寻找一种使用JS过滤的方法。像一些捕获全屏的if语句一样，它会调整大小，并且不应用上述规则