全屏HTML5部分背景视频 [英] Fullscreen HTML5 Section Background Video

问题描述

我试图用css和HTML5制作全屏HTML5部分背景视频，并发现了许多文章，但不是所有具有相同的概念。

I tried to make Full screen HTML5 Section Background Video with css and HTML5 and found many articles, but not all with same concept.

问题是，所有文章都使用 position：fixed; 。我需要找到一种方法，使网站的第一部分中的视频像此网站。

The problem is that all the articles make the video with position: fixed; that make the video scroll with you. I need to found a way to make the video in the first section in the site only like 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; 
}

我用实例来测试ur评论，请检查这里

i make live example to test ur comments please check here

推荐答案

这样的div和增加z-index的内容，让我知道如果这个工作..

Wrap the video inside a div like this and increase z-index of content,let me know if this works..

    #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>

这篇关于全屏HTML5部分背景视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！