Обрезать видео HTML5 снизу

Question

У меня есть магазин, где я хочу разместить видео-баннер.Мне удалось настроить его, как показано ниже.

Он отображается на сайте и работает хорошо, но я хочу уменьшить высоту видео, потому что оно действительно большое.Но когда я регулирую высоту и устанавливаю высоту видео на 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:

  .top2 {
    display: block;
    /* example width - can use '%' as well */
    width: 300px;
  }

  .wrapper2 {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
  }

  video {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
  }