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%;    
}

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

1 个答案: