HTML5에서 전체 페이지 자막 비디오 - jquery 없음

Question

내 웹 사이트 배경에 비디오를 추가하려고합니다. 나는 로딩 시간을 최적화하기 위해 자바 스크립트없이 이것을하고 싶다. HTML : 지금까지,이 코드를 사용

 <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" poster="img/video-poster.jpg" > 
      <img src="img/video-poster.jpg" alt=""/> 
      <source type="video/mp4" src="video/video.mp4"/> 
      <source type="video/ogg" src="video/video.ogv"/> 
     </video> 

CSS :

#video_background { 
     position: absolute; 
     bottom: 0px; 
     right: 0px; 
     min-width: 100%; 
     min-height: 100%; 
     width: auto; 
     height: auto; 
     z-index: -1000; 
     overflow: hidden 
    } 

문제는 내 비디오 상단과 하단에 검은 여백이있는 파노라마 형식 (16/9)을 가지고 있다는 것입니다 . 분명히 나는 ​​그들이 화면에 나타나길 원치 않는다. 따라서이 코드를 사용하면 검정색 여백이 페이지 하단에 나타납니다.

검은 색 여백이 잘리고 여전히 응답 성 디스플레이가 있는지 어떻게 확인할 수 있습니까?

감사

Answer 1

은 거기에 더 나은 옵션이있을 수 있습니다하지만 난이 내 눈에 우아한 해결책을 찾을 수 있습니다.

비디오를 #video-backgroundscale(1.09)으로주었습니다.이 비디오는 경계선을 제거하기 위해 비디오를 조금씩 확대합니다.

또한이 내용을 html 및 body에 추가하여 동영상이 스크롤없이 볼 수 없도록했습니다. 선택 사항이지만 하단 경계선은 표시하지 않습니다.

html, body { 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    margin: 0; 
    padding: 0; 
} 

비디오에 대한 css

,

#video-background { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1000; 
    overflow: hidden; 
    transform: scale(1.09); 
    -webkit-transform: scale(1.09); 
    -moz-transform: scale(1.09); 
    -o-transform: scale(1.09); 
} 

마지막으로, 여기 보이는 방법을 보여 JSFIDDLE입니다. URL에서 코드를 보려면 /show을 제거하십시오.