如何在网页的一部分中放置自动播放的视频作为背景（如此处-http://www8.hp.com/in/en/home.html）？

Question

The HP-India website has an autoplay video in the background of a section below the header. How can I recreate something similar?

Answer 1

I use media queries for responsive way, i didn't use any code of this site just the source video webm and mp4. I did my own skill in CSS, may be you can make it more efficient but i am no designer ...

 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>