Как сделать видео реагировать так много места, как на обложке?

Question

У нас есть изображение поверх видео, когда они нажимают на изображение, видео установлено на display:block;, а для изображения установлено значение display:none;, который в основном просто переключает изображение для видео при нажатии.

Изображение и видео установлены на width:100%;, но хотя они имеют одинаковую ширину, изображение выше видео. Допустим, что изображение составляет 416 пикселей, а видео имеет высоту 300 пикселей. Как бы я мог реагировать на недостающую высоту видео, чтобы остальные относительные элементы на странице не смещались при переключении с изображения на видео?

Вот HTML:

<div> 
    <div onclick="coverImage()"> 
     <img src="http://example.com/image" alt="overview-vid-1" id="wp-image-245" width="619" height="416" style="cursor:pointer;" class="alignnone size-full wp-image-245" /> 
    </div> 
    <div id="thevideo" style="display:none"> 
     [youtube-shortcode-plugin vid=""/] 
    </div> 
</div> 

Вот Javascript, что позволяет коммутатору (на всякий случай):

<script stype="text/javascript"> 
    function coverImage(){ 
     theImg=document.getElementById('wp-image-245');theImg.style.display='none'; 
     thevid=document.getElementById('thevideo'); thevid.style.display='block'; 
    }; 
</script> 

Answer 1

Здесь вы идете: http://jsfiddle.net/9zc9aogL/3/

Ваш размер изображения является необычное соотношение - видеоролики youtube обычно 16: 8 или что-то еще .. размер изображения, который вы выбрали, немного больше похож на 16:10.

Вот CSS, который делает ваше видео отзывчивым и того же размера, что и ваше изображение 16:10. Обычно, чтобы сделать YouTube видео отзывчивого без черных полос сверху/снизу, я бы установить padding-bottom:56.25%;, но для этого размера изображений это padding-bottom:62.25%

.wrap { 
    position: relative; 
    padding-bottom: 62.25%; 
    padding-top: 25px; 
    height: 0; 
} 

.wrap iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;  
}