Установите максимальный размер для соотношения размеров видео

Question

Установить максимальный размер для соотношения размеров видео

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    max-width: 1024px;
    max-height: 576px;
}

.videoWrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 1024px;
    max-height: 576px;
}

И HTML Код

<div class="videoWrapper">
    <video  class="aspect-ratio-box" autoplay>
        <source src="../../../assets/original.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video> 
</div>

Вот результат: https://prnt.sc/s6y3no

Размер ширины правильно ограничен 1024px. Проблема в том, что высота не ограничена. Он не позволяет поместить абзац под видео.

Почему он игнорирует мои css правила? Как я могу преодолеть эту проблему

Спасибо за помощь

Answer 1

Я нашел решение.

.video {
    object-fit: cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.video-frame {
    position: relative;
    padding-bottom: 56.25%;
    display: block;
    overflow: hidden;
}

.video-container {
    max-width: 1024px;
}

И HTML

<div class="video-container">
    <div class="video-frame">
        <video class="video" autoplay>
            <source src="../../../assets/original.mp4" type="video/mp4">
        Your browser does not support the video tag.
        </video> 
    </div>
</div>