如何用视频做网页的背景

详细操作

使用视频作为网页背景是件很酷的事情，但也是件困难的事情。CSS里的background-image属性只能使用图片、SVG、颜色或渐变色。但从技术讲，我们是可以伪造出一种效果，让视频以背景的角色出现在其它HTML元素后面。这其中的难点是视频要填充整个浏览器页面，而且要响应浏览器窗口大小的变化。

如图：

下面，打开网页编辑工具。

添加css代码:

这里摆放视频格式的顺序很重要，因为有些版本的谷歌浏览器里，如果.webm格式的视频放在了其他视频后面，视频将无法播放。

我们使用视频的第一帧图像作为视频的封面图片，这样，当背景视频一旦加载完成，我们可以看到很流畅的从图片过度到背景视频播放。

让视频扩展到全屏的方法：

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

一些老式的浏览器无法播放这种格式的视频，但它们仍然识别

用户类似问题：

问题1：请问在淘宝页面上如何能做背景上面有视频的效果,如...

先插入图片，然后在你准备要插入视频的地方，绘制适当大小的层，然后在插入—媒体—FLASH—在URL上面，粘贴入视频的地址，确认即可，然后将图片链接改成淘宝内部的图片地址，复制代码到淘宝就可以了 >>详细

问题2：网页设计 像这种把视频镶嵌到背景图片里面是怎么做...

用css里面嵌套的js，用flash也可以但是一般是js >>详细

问题3：html5如何把视频动画当作网页背景？

这个不太可能……除非你把一个视频width和hight设为100%固定不变，然后把其余的网页内容通过z-index叠加到上面，不过个人觉得即使实现了网页也会然人看的很费力 >>详细

问题4：我看到了一个网页背景竟然是视频，请问是怎么做的？

falsh做的视频不就可以做背景么 >>详细

问题5：谁能发给我一份网页制作的视频，想做一个简单的网...

这里是你的视频代码 距顶部50px 水平局中. >>详细