Css 全页视频HTML5
大家好,我找到了一些文章,你可以制作一整页的背景视频。。 这个想法是: CSS:Css 全页视频HTML5,css,html,video,Css,Html,Video,大家好,我找到了一些文章,你可以制作一整页的背景视频。。 这个想法是: CSS: #bg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; } #bg video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; mi
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
filter: blur(3px);
-webkit-filter: blur(3px);
}
<div id="bg"><video src="video/video.mp4"
id="bg-video" muted autoplay loop ></video></div>
HTML:
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
filter: blur(3px);
-webkit-filter: blur(3px);
}
<div id="bg"><video src="video/video.mp4"
id="bg-video" muted autoplay loop ></video></div>
我想做两个部分,第一部分包括与500px的高度只有视频,第二部分包括我的内容。但当我试图改变#bg位置时:固定代码>视频变小,内容变小
我在我的主机上做了一个例子,如果我没弄错,你想在你的视频中使用ContentWrapper
?如果是这样,请尝试将此div
嵌套到您的vediowrapper
中。正如我所看到的,<代码> VEDIOWRAPPER <代码>在内容包装器< /代码>之前关闭,因此<>代码>位置:相对< /代码>对它没有影响,因为它不包含。你应该考虑压缩你的视频。视频包装与500像素的高度和内容包装,把我的其他div后的视频