用 HTML5 视频填充浏览器窗口

【问题标题】：Fill browser window with HTML5 video用 HTML5 视频填充浏览器窗口
【发布时间】：2014-01-11 00:31:24
【问题描述】：

我正在尝试使 HTML5 视频充满浏览器窗口的整个宽度和高度。

创建全屏视频背景相对简单，但我想做的是拥有视频但其下方有内容。由于视频将全屏显示，因此当访问者开始滚动时，内容将立即出现在“折叠”之后。

非常感谢您的帮助、建议或指导！

【问题讨论】：

要求代码的问题必须表明对所解决问题的最低理解。包括尝试过的解决方案、它们为什么不起作用以及预期的结果。
全屏模式和用户滚动的视频，我看不懂？！
html, body { height: 100%; width: 100% } 会帮助你。然后只需简单地使视频具有 100% 的宽度和高度。

标签： jquery css html video fullscreen

【解决方案1】：

好吧，你没有提供任何标记或示例，所以我做了一些假设，但这应该可以满足你的需要：

让我们假设以下 HTML：

<div class="container">
    <video></video>
    <article>
        <p>This is content after the fold...</p>
        <p>This is content after the fold...</p>
    </article>
</div>

使用 jQuery，您可以轻松地调整 video 元素的大小，如下所示：

$(function() {  
    var winHeight = $(window).height();
    $('video').css({  'height': winHeight, 'width': '100%'});
});

jsFiddle Demo

【讨论】：

@robertc，谢谢。我怀疑他希望它是完整的 viewport 宽度:)