自動再生ビデオをウェブページのセクションにバックグラウンドとして配置する方法（ここでは、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) { 
 
\t .video-background video{ left:-600px;} 
 
} 
 

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

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

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

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

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

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

 
@media all and (max-width: 320px) { 
 
\t .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>