如何使视频响应式地占用与其封面图像一样多的空间？

Question

在这里，我们在视频顶部有一个图像，当他们单击图像时，视频设置为display:block;，图像设置为display:none;，这基本上只是在单击时切换视频的图像。

图像和视频都设置为 width:100%;但即使它们的宽度相同，图像也比视频高。假设图像为 416px，视频的高度为 300px。我将如何响应地弥补缺失的视频高度，以便页面上的其余相关元素在从图像切换到视频时不会移动？

这是 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。

以下是使您的视频响应式且与 16：10 图像大小相同的 CSS。通常，为了使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%;    
}