Question

我有一个Shopify商店，我想在上面放一个视频横幅。我设法按照下面的代码进行设置。

它显示在网站上并且运行良好，但是我想减小视频的高度，因为它确实很大。但是，当我调整高度并将视频高度设置为75％时，视频的底部不会显示。它只是切断视频。

在视频显示完整视频但重新缩放后，我可以调整高度吗？

我尝试了很多在互联网上找到的东西，但没有一个对我有用。有人可以帮我吗？

谢谢。

最诚挚的问候，

凯文

Liquid/HTML

{% if template.name == "index" %}
<div class="top2">
    <div class="wrapper2">
        <video autoplay loop muted playsinline>
            <source src="https://cdn.shopify.com/s/files/1/0093/6552/0444/files/Smilezz.Promovideo.2019.Bannervideo2.1080p.mp4?4182" type="video/mp4">
        </video>
    </div>
</div>  
{% endif %} 

CSS

.top2 {
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        position: relative;
    display: block;
    font-size: 0;
}

.wrapper2 {
        position: relative;
        padding-bottom: 200%;
        transform: translateY(-35.95%);
    margin-bottom: -200px;
    font-size: 0;
}

video {
        position: absolute;
        top: 0;
        left: 0;
        width:100%;
        height: 85%;
    display: block;
    padding: 0;
}

Answer 1

视频只需要保持宽高比，否则视频将被垂直或水平切割。

最好的方法是控制视频的宽度，高度会自动缩放

您编辑过的CSS：

裁剪底部的HTML5视频

1 个答案: