如何让HTML5视频占据浏览器窗口的全高和宽度？

Question

我需要视频在第一页加载时占用浏览器的全宽和高度，我正在使用bootstrap。你是如何做到这一点的？：

以下代码类型，但高度超过浏览器的100％。我希望能够向下滚动到下面的文字，因此视频只显示在顶部。

DEMO

＆＃13;

＆＃13;

html, body {
 height: 100%;
 }

#homepage-video {
    height: 100%;
    width: 100%;
 }

＆＃13;

<div class="container-fluid">
 <div class="row">
  <video id="homepage-video" autoplay="true" loop="true" >
   <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
     type="video/mp4" />
         Your browser does not support HTML5 videos.
       </video>
     </div>
   </div>
   <div class="container">
        // Text in here....
   </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以通过jquery设置它，只需包含一个jquery库并添加下面的代码

$(function(){
    $('video').css({width:$(window).width(), height:$(window).height()});
});