css - 为什么它们在 html 和 css 上有所不同？id inside vs outside video标签

Question

我想制作一个视频作为整个浏览器的背景。我尝试了两种不同的方法。如下代码所示，我在css到#backgroundvideo之间设置了id，右侧和按钮侧总是留有一些空白。第二个是在外面设置#video，除了不响应外，效果很好。为什么他们不同？

html代码：

<div id ="video"><video id ="backgroundvideo" autoplay loop="true">
      <source src="videos/test2.mp4" loop="true">
  </video> 
  </div>

CSS代码：

 #backgroundvideo{
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

或者

#video{
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
        }

另外：即使调整了浏览器的大小，如何使视频保持静态？因为我提到的两种方式都会在调整浏览器大小时改变视频大小。

Answer 1

html

<div id ="video">
<video id ="backgroundvideo" autoplay loop="true" width="100%" height="100%">
    <source src="videos/test2.mp4" loop="true"/>
</video> 
</div>

css

#backgroundvideo{
    position: relative;
    display: block;
    width: 100%    !important;
    height: auto   !important;
}
html, body {
    height: 100%;
    width: 100%;
}

i put code here:

http://jsfiddle.net/DjdCM/

for more information, check this:

http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php