全屏 HTML5 部分背景视频

Posted 2023-05-07

【中文标题】全屏 HTML5 部分背景视频

【英文标题】：Fullscreen HTML5 Section Background Video

【发布时间】：2014-04-06 02:43:00

【问题描述】：

我尝试使用 css 和 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 它使视频更小。抱歉不工作

【参考方案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;

在容器上