全屏 HTML5 部分背景视频答案

【问题标题】：Fullscreen HTML5 Section Background Video全屏 HTML5 部分背景视频
【发布时间】：2014-04-06 02:43:00
【问题描述】：

我尝试使用 css 和 HTML5 制作全屏 HTML5 部分背景视频，发现很多文章，但并非所有文章都具有相同的概念。

问题是所有文章都用position: fixed;制作视频，使视频随你滚动。我需要找到一种方法来制作网站第一部分中的视频，例如 this site。

一般概念是：

http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video

HTML：

<video autoplay loop poster="polina.jpg" id="bgvid">
    <source src="polina.webm" type="video/webm">
    <source src="polina.mp4" type="video/mp4">
</video>

CSS：

video#bgvid { 
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

我做一个例子来测试你的 cmets 请检查here

【问题讨论】：

试试position: absolute; ?
@Aditya 它使视频更小。抱歉不工作

标签： css html html5-video

【解决方案1】：

将视频包装在这样的 div 中并增加内容的 z-index，如果这可行，请告诉我..

    #video_container {
     bottom: 0;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
     background: url(polina.jpg) no-repeat;
     min-height: 720px;
    }
   #bgvid {
     min-width: 100%;
   }

<div id="video_container" style="overflow:hidden; background-size:cover;">
    <video autoplay loop id="bgvid">
       <source src="polina.webm" type="video/webm">
        <source src="polina.mp4" type="video/mp4">
   </video>
 </div>

【讨论】：

抱歉@Aditya，视频仍然固定 :( 但滚动显示，我可以向上滚动视频内容：D
我上传到我的服务器请检查mohammadsamy.com/Video，我发现另一个问题高度：720px;剪视频？
:(你可以在live example中尝试一下吗。红色潜水成为top
尝试相应地给出高度，如果对你有帮助，请点赞/接受答案..谢谢
为什么它不能在 Chrome 中工作？它给我黑屏

【解决方案2】：

试试@aditya 的代码

overflow-y: hidden;

在容器上

【讨论】：