你可以显示HTML5 <video>作为全屏幕背景吗？

如何将HTML5 <video>作为全屏幕背景显示到您的网站？ 类似于这个Flash网站演示…

http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617

Answer 1

使用position:fixed在video上，将其设置为100％宽度/高度，并在其上放置一个负z-index ，使其出现在所有内容之后。

如果您查看VideoJS ，则控件只是位于video顶部的html元素，使用z-index来确保它们位于上方。

HTML

 <video id="video_background" src="video.mp4" autoplay> 

（添加webm和ogg源以支持更多的浏览器）

CSS

 #video_background { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: -1000; } 

它可以在大多数HTML5浏览器中工作，但可能不是iPhone / iPad，video需要被激活，并且不喜欢其上的元素。

Answer 2

只是对此的评论 – 我已经使用HTML5video的全屏幕背景，它的作品 – 但请确保使用高度：100％和宽度：汽车或其他方式 – 以确保您保持高宽比。

至于iPad，你可以（显然）做到这一点，通过隐藏，然后强制点击事件触发，并有点击事件的function启动加载/播放（）。

Ps – 这不应该需要任何插件，可以用最小的JS完成 – 如果你的目标是任何移动设备（我想你可能是..）远离任何这样的框架是前进的方向。

Answer 3

我可能有点晚回答这个问题，但这对于寻找答案的新人很有用。

上面的答案很好，但要获得完美的video背景，您必须检查宽高比，video可能会剪切，或者在调整屏幕大小或在不同的屏幕尺寸上使用屏幕时，屏幕四周变形。

我不久前进入了这个问题，我find了使用媒体查询的解决scheme。

这里是我写的如何创build一个只有CSS的全屏video背景的教程

我将在这里添加代码：

HTML：

 <div class="videoBgWrapper"> <video loop muted autoplay poster="img/videoframe.jpg" class="videoBg"> <source src="videosfolder/video.webm" type="video/webm"> <source src="videosfolder/video.mp4" type="video/mp4"> <source src="videosfolder/video.ogv" type="video/ogg"> </video> </div> 

CSS：

 .videoBgWrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; } .videoBg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (min-aspect-ratio: 16/9) { .videoBg{ width: 100%; height: auto; } } @media (max-aspect-ratio: 16/9) { .videoBg { width: auto; height: 100%; } } 

希望对你有帮助。