배경 비디오 CSS (전체 화면 아님)

Question

모두에게 좋은 날! 배경 비디오에 대한 질문이 있습니다. 전체 페이지에 첨부되었지만 맨 위에 삽입해야합니다. 아무도 저에게 문제가 무엇인지 말해 줄 수 있습니까? 큰 감사! HTML :

<video autoplay loop poster="video-bg.jpg" id="bgvid"> 
    <source src="video-bg.webm" type="video/webm"> 
    <source src="video-bg.mp4" type="video/mp4"> 
</video> 

CSS :

video#bgvid { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    background: url(video-bg.jpg) no-repeat; 
    background-size: cover; 
} 
@media screen and (max-device-width: 800px) { 
    html { 
     background: url(video-bg.jpg) #000 no-repeat center center fixed; 
    } 
    #bgvid { 
     display: none; 
    } 
} 

Answer 1

첫째로 position: fixed 대체 페이지를 스크롤 할 때 당신은 또한 비디오를 이동하고자하는 경우 가로 방향으로 만
마지막으로 top: 0;

에 top: 50%;을 변경 요소를 이동하는 transform: translateX(-50%);으로 transform: translateX(-50%) translateY(-50%); 교체보다 min-width/height: 100%;
을 제거 position: absolute;

#bgvid { 
 
    background: none #aaa !important; 
 
    text-align: center; 
 
    width: 300px; 
 
    height: 150px; 
 
} 
 
#bgvid { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 50%; 
 
    /*min-width: 100%;*/ 
 
    /*min-height: 100%;*/ 
 
    -ms-transform: translateX(-50%); 
 
    -moz-transform: translateX(-50%); 
 
    -webkit-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
    z-index: -100; 
 
    background: url(video-bg.jpg) no-repeat; 
 
    background-size: cover; 
 
} 
 
@media screen and (max-device-width: 800px) { 
 
    html { 
 
     background: url(video-bg.jpg) #000 no-repeat center center fixed; 
 
    } 
 
    #bgvid { 
 
     display: none; 
 
    } 
 
}

<div id="bgvid">VIDEO HERE</div>

Answer 2

위치가 전체 페이지에 고정 할 수 있도록 고정됩니다. position: absolute;도 높이를 & 너비로 변경하십시오.