HTML5中的背景视频不缩放

Question

我正在尝试使用浏览器窗口缩放视频，但仍覆盖整个区域，但无法实现此目的。任何人都知道为什么我目前的方法不起作用？

HTML：

<div class="bgVideoWrap">
<video id="bgVideo" loop="true" autoplay="true" >
    <source src="video/bgVideos/Speak_BG.webm" type="video/webm"></source>
</video>
</div>

CSS：

#bgVideo {
    height: auto;
    width: auto;
    min-width: 100%;
    min-height: 100%;
}

.bgVideoWrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ff0000;
    z-index: -1000;
    overflow: hidden;
}

html, body  {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 1;
}

Answer 1

-DEMO-

将background-size: cover;设为.bgVideoWrap，将opacity: 0.6;设为#bgVideo

MARKUP：

<div class=bgVideoWrap>
<video id=bgVideo loop autoplay poster=http://media.w3.org/2010/05/bunny/poster.png>
    <source src=http://media.w3.org/2010/05/bunny/movie.mp4 type=video/mp4>
    <source src=http://media.w3.org/2010/05/sintel/trailer.ogv type=video/ogg>
     <p>Your user agent does not support the HTML5 Video element.</p>
</video>
</div>

型：

html, body  {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 1;
}

#bgVideo {
    height: auto;
    width: auto;
    opacity: 0.6;    /*Set opacity*/
    min-width: 100%;
    min-height: 100%;
}
.bgVideoWrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    overflow: hidden;
    background: #333 url("http://aimg.disneystore.com/content/ds/skyway/2012/category/full/cp_FWB_Brave_20120926.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }