javascript - 如何将自动播放视频作为网页部分的背景(如此处 - http ://www8. hp.com/in/en/home.html)？

Question

HP-India website在标题下方的部分背景中有一个自动播放视频。我怎样才能重新创建类似的东西？

Answer 1

我使用媒体查询作为响应方式，我没有使用本网站的任何代码，只是源视频 webm 和 mp4。我在 CSS 方面做了自己的技能，也许你可以提高它的效率，但我不是设计师......

div.content, div.top, div.footer{
 float:left;
 position: relative;
 top:0px;
 left:0px;
 z-index:1000;
 width:100%;
 border-radius:2px;
}
.top{
 background-color:red;
 margin-bottom:20px;
}
.content{
 background-color:green;
 min-height:600px;
 height:60%;
 opacity:0.5;
}
.footer{
background-color:yellow;
}
@meia all and (max-width: 1080px) {
	.video-background video{ left:-600px;}
}

@media all and (max-width: 980px) {
	.video-background video{ left:-300px;}
}

@media all and (max-width: 800px) {
	.video-background video{ left:-300px;}
}

@media all and (max-width: 768px) {
	.video-background video{ left:-300px;}
}

@media all and (max-width: 750px) {
	.video-background video{ left:-380px;}
}

@media all and (max-width: 640px) {
	.video-background video{ left:-280px;}
}

@media all and (max-width: 360px) {
	.video-background video{ left:-180px;}
}

@media all and (max-width: 320px) {
	.video-background video{ left:-160px;}
 }
.video-background video{position: fixed;top:0px;min-width: 100%;min-height: 100%;}
.video-background{min-width:100%;min-height:100%;height:100%;width:100%;position:fixed;top:0px;}

<div class="top">HEADER</div>
<div class="video-background">
<video controls="" controlslist="nodownload" style="position:fixed;z-index:-1;" poster="http://www.remmache.fr/sites/default/files/background_video/douceur.jpg" autoplay="" loop="" muted="" playsinline=""><source src="http://storage.media.ext.hp.com/sprocket/sprocket_oct.webm" type="video/webm" onerror="fallback(parentNode)"><source src="http://storage.media.ext.hp.com/sprocket/sprocket_oct.mp4" type="video/mp4"><source src="http://www.remmache.fr/sites/default/files/background_video/Coloring.ogv" type="video/ogg"></video></div>
<div class="content">i am the content .... </div>
<div class="footer">footer</div>