오버플로를 숨기는 비디오 높이 100vh가 숨김.

Question

jumbotron을 만드는 데 100vh를 사용하고 그 배경이 사용자의 화면을 가득 채우고 있습니다. 사진을 사용할 때는이 문제가 없었지만 클라이언트는 비디오 배경을 원합니다.

오버플로를 숨김으로 설정했지만 사이트에서 가로 스크롤 막대가 오버플로를 표시하고 있습니다. 나는 그것을 왜 자르지 않을지 알 수 없다.

다음은 점보트론 및 비디오 기능을위한 코드입니다.

Website Here

#video-background { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    overflow: hidden; 
    z-index: -1000; 
    height: 100vh; 
    } 

    .jumbotron{ 
    font-family: 'Raleway', Helvetica, Arial; 
    background: rgba(0,0,0,0.6); 
    background-size: cover; 
    background-position: center; 
    height: 100vh; 
    padding: 60px 0; 
    margin: 0; 
    position: relative; 
    overflow: hidden; 
    } 

HTML

<div class="jumbotron"> 
     <video id="video-background" preload muted autoplay loop> 
      <source src="vid/lowres.mp4" type="video/mp4"> 
     </video> 
    </div> 

물론, 거기에 대형 기기 내부에 더,하지만 난 그게 관련이 있다고 생각하지 않습니다.

Answer 1

Overfow-x : hidden; 크롬에서 저를 위해 잘 작동합니다. 가로 스크롤 막대가 보이지 않습니다. 시도해보십시오.

.jumbotron{ 
    font-family: 'Raleway', Helvetica, Arial; 
    background: rgba(0,0,0,0.6); 
    background-size: cover; 
    background-position: center; 
    height: 100vh; 
    padding: 60px 0; 
    margin: 0; 
    position: relative; 
    overflow-x: hidden; 
    } 

Answer 2

너무 낮게 설정하면 위의 DOM 노드에서 .jumbotron을 설정하고 Chrome에서 작업 해보십시오.