怎么把视频做成背景html,基于HTML5 video标签的背景视频效果

直接贴代码~

背景视频

body{

position:relative;

overflow: hidden;

margin:0;

height:100%

}

.divbak{

width: 100%;

height: 100%;

z-index: 1;

-webkit-filter: blur(10px);

-moz-filter: blur(10px);

-ms-filter: blur(10px);

filter: blur(10px);

}

.divzindex{

z-index: 2;

position:absolute;

left:0px;

top:0px;

width: 100%;

height: 100%;

}

欢迎访问约定之束

页面依旧创作中...

太萌友情服务器支持

如果用到的话 不防注释一下我的信息呢？  关于这个效果的最新代码会在ydzs.moe的首页显示出来 我还在改的 兼容性啊 之类的都很差 video标签的限制有点多

补充1：

模糊是因为加了模糊化效果 删除第一个div里面的模糊相关css即可看清

补充2：

关于代码的思路解释

首先 我们将背景视频放在一个div中  将此div的宽度和高度设定为100% 用于占用浏览器容器的全屏 并且给他一个z-indexs属性为1

然后 我们设定第二个div 将他设定为绝对定位 top和left均为0 z-index为2 这样便会使第二个层居于第一个层上方 第二个层内就可以写自己想写的东西啦 主要就是层级问题 完全无需任何js 就这么萌萌哒~