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%;
}

我把代码放在这里：

http://jsfiddle.net/DjdCM/

有关详情，请查看：

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

为什么他们的html和CSS不同？ id inside vs outside video tag

1 个答案: