반응 형 전체 화면 html5 동영상

https://yourkarma.com/과 같은 전체 화면 반응 형 배너 비디오를 만들고 싶습니다. 나는 똑같이 만들지 만 문제는 모바일 및 탭보기에서 비디오 높이를 줄이려고 할 때입니다. 따라서 CSS에서 일부 변경을 수행 한 다음 결과를 얻지 만 모바일 및 탭보기에서 비디오의 주요 부분을 잃어 버렸습니다. . 내 레퍼런스 사이트와 비슷한 것을 어떻게 얻을 수 있습니까?반응 형 전체 화면 html5 동영상

CSS

.main_banner{ 
    width:100%; 
    top:0px; 
    height:100%; 
    float:left; 
    position:absolute; 
    left:0; 
    overflow:hidden; 
    background-color:#141517; 
} 
.main_banner video{ 
    width:auto; 
}

HTML

<section class="main_banner"> 
     <video autoplay loop preload> 
      <source src="videos/Meet_Eric_at_Aditi_Staffing_MP4.mp4" type="video/mp4"> 
      <source src="videos/Meet_Eric_at_Aditi_Staffing_Ogv.ogv" type="video/ogg"> 
      <source src="videos/Meet_Eric_at_Aditi_Staffing_Webm.webm" type="video/webm"> 
      Your browser does not support the video tag. 
     </video> 
    </section>

출처

2014-11-13 Krish

왜 미디어 쿼리를 사용하지 않습니까? –

미디어 쿼리 사용 .. 어떻게 미디어 쿼리로 달성 할 수 있습니까 ??? 모바일 및 탭보기에서 전체 화면으로 비디오가 필요합니다. – Krish

미디어 쿼리가 작동하지 않거나 미디어 쿼리에 맞는 방법을 모르는 경우 –

나는 당신이 height:100%을 남겨한다고 생각합니다. 응답 성을 높이고 화면의 전체 높이를 사용하려면 top:0; bottom:0을 사용하십시오. 위치가 필요합니다 : 절대 또는 상대 iirc.

희망이 도움이됩니다.

출처

2014-11-13 07:56:18 Drai

비디오가 작은 크기의 장치에 맞지 않아 bcoz 너비 줄 : 자동 및 오버플로 숨김 ... 그렇지 않으면 비디오 높이를 줄입니다. skew the video? .. 이것은 데모 링크입니다 : http://jsfiddle.net/55j7xch1/. – Krish

그래, 문제는 그것이 화면을 채우지 않는다는 것이 아닙니다. 다른 뷰 스코프에 대해 서로 다른 비디오를 사용하는 것은 어떻습니까? 데스크톱보기에서 더 큰 동영상을 사용하지만 휴대 기기 용으로 설계된 작은 기기 용 비디오를 사용하는 것과 비슷합니까? 그렇지 않으면 비디오가 축소되고 전체 높이를 사용하면 비디오가 비뚤어집니다. – Drai

죄송합니다 ... 우리는 서로 다른 비디오를 사용할 수 있습니다. 단 하나만 가능합니다 ... 달성 할 수있는 옵션이 있습니까? – Krish

반응 형 전체 화면 html5 동영상

답변

관련 문제