0
HP-India website에는 헤더 아래 섹션의 배경에 자동 재생 비디오가 있습니다. 비슷한 것을 다시 만들려면 어떻게해야합니까?자동 재생 비디오를 웹 페이지의 섹션에 배경으로 두는 방법 (예 : http://www8.hp.com/in/en/home.html)?
A
답변
0
저는 미디어 쿼리를 사용하여 반응 형 방식으로,이 사이트의 코드를 소스 비디오 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>
보일 수 있습니다 않았다? – Xufox
소스 코드가 그를 브라우저의 html 특정 부분으로만 밝혀 주므로 일부 주요 부분에 적응 적으로 반응하지 못합니다. –
웹 페이지에서 효과를 다시 만들려고 할 때 항상하는 일은 소스 코드를 텍스트 편집기에 복사하고 관련 있다고 생각되는 내용을 제거하는 것입니다. 그 효과가 더 이상 웹 페이지에 나타나지 않으면 그 코드와 관련이 있다는 것을 압니다. – NathanielSantley