Question

我正在构建一个主页，根据窗口宽度自动重新定位元素。问题是一个元素＆＃34;播放器＆＃34;有一个YouTube视频。我希望用户能够全屏显示YouTube视频，但是在他们点击全屏后，会调整窗口调整大小并且该播放器＆＃34;播放器＆＃34;元素重新定位，取消全屏。

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

这是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

Answer 2

你提到了两个问题，这里是我如何修复相同的两个问题（在其他答案的帮助等）：

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

我们通过跟踪WebSettings并且仅在windowWidth更改时触发我们想要在实际调整大小时发生的事情来执行此操作。我还使用一个小延迟（800毫秒）来等待用户在拖动时完成调整大小。

windowWidth

2＆＃34;我希望用户能够全屏显示YouTube视频......＆＃34;

跟踪用户是否处于全屏模式（使用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); } });和var fullscreen = false;等）并且仅在全屏模式下调整大小：

fullscreenchange

3现在全部在一起：

var fullscreen = false;

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

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

Answer 3

我在开发中也遇到了这个问题。我使用相当简单的解决方案对其进行了修正-将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();
}

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

3 个答案: