HTML5 비디오 해상도를 기반으로 한 동적 부모 div 및 높이

Question

전체 브라우저 너비를 차지하는 HTML5 비디오가 포함 된 반응 형 디자인 사이트가 있습니다. 비디오의 CSS에는 브라우저 창의 크기에 관계없이 비디오 해상도 비율을 유지하는 width:100%;height:auto;이 있습니다. 부모 DIV의 width:100% 그래서 부모가 항상 초기로드에 <video>과 동일한 비율과 크기를 유지하면서

내가 해결하고 싶은 문제는 <video>의 부모 DIV의 높이를 조정하는 것입니다.

비디오는 640x360입니다. 브라우저 창이 1280x800이라고 가정 해 보겠습니다. 동영상 해상도는 너비가 100 %가되도록 크기가 1280x720으로 두 배가되지만 부모 div는 창의 높이가 800이므로 높이가 80 픽셀 더됩니다. 해당 div의 높이를 720으로 조정하여 <video>에 맞게 조정하고 싶습니다.

저는 아직 JS를 배우고 있으며이를 해결하는 데 능숙하지 않습니다. 미리 감사드립니다. 여기

나의 설명이 도움이 될 수 있습니다 바이올린입니다 (문제를 복제하기 위해 창 크기를 조정 목표는 창 크기 조절시 보여주는 어떤 빨간색 배경이없는 것입니다.) : http://jsfiddle.net/alanweibel/UMstP/2/

Answer 1

내가 이해 한 가정을 http://webdesignerwall.com/tutorials/css-elastic-videos

당신은 당신이 비디오의 비율을 알고 다음 절대적으로 내 비디오를 위치 경우 컨테이너 의 패딩을 계산할 수 있습니다 : 당신은 제대로,이 문서는 약간의 트릭이 자바 스크립트없이 일어날 수 있도록하는 데 사용할 수있는 설명합니다. 나는이 기술을 사용하기 위해 바이올린을 조정했습니다. http://jsfiddle.net/SeykC/

<div class="wrap"> 
    <div class="container"> 
     <video id="video" controls="controls"> 
      <source type="video/mp4" 
        src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" /> 
     </video> 
    </div>   
</div> 
​ 

video { 
    max-width: 100%; 
    height: auto; 
} 

.container { 
    background: red; 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
} 

.container iframe, 
.container object, 
.container embed, 
.container video{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}​