Подгонка видео HTML5 к размеру родительского элемента

Question

У меня есть элемент внутри

, который автоматически изменяет размер при динамическом изменении / добавлении / удалении других элементов на странице.

Я бы хотел, чтобы элемент видео также автоматически изменялсяизменить размер так, чтобы он всегда оставался внутри своего фонового div;это работает, если я устанавливаю высоту и ширину CSS для видеоэлемента на 100%, поэтому он всегда имеет тот же размер, что и его контейнер.Однако, если размеры содержащего элемента div меньше, чем присваиваемое видеоизображению videoWidth или videoHeight, оно начинает вести себя так, как если бы свойства CSS высоты / ширины ссылались на проценты от внутренних размеров видеоизображения, а не на контейнер div!Например, если высота CSS равна 100%, она масштабируется нормально, за исключением того, что она имеет минимальный размер собственной высоты видео;если высота CSS составляет 50%, она масштабируется нормально, но с минимальным размером 50% от собственной высоты видео.

Я могу это исправить, используя JavaScript для периодического сброса высоты элемента видео впиксели - это вычисленная высота контейнера, но это очень медленно и изменчиво.Есть ли способ исправить это в CSS, чтобы размер видеоэлемента соответствовал размеру?

Answer 1

Мне хорошо известно, что это более старый вопрос, но я изо всех сил пытался создать макет с помощью CSS, в котором видео автоматически масштабируется, чтобы соответствовать некоторому блоку, обычно внутри родительского элемента.

Простое использование width и height со статическим позиционированием работает только в определенной конфигурации родительско-дочерних топологий, а также во многом зависит от стиля топологии. Даже если у вас есть какой-то элемент для правильного расчета его границ, после того, как вы поместите в него элемент воспроизводимого видео, он расширит поле разрешенных родителями, даже если это наименее разумное поведение, которое вы ожидаете.

Добавьте несколько fieldset элементов, и вы окажетесь в кроличьей норе CSS и особенностей браузера.

Что я обнаружил, так это то, что проще всего было просто извлечь элемент видео из контекста позиционирования, используя position: absolute. Это не означает, что он не будет визуально хорошо себя вести - использование width: 100% и height: 100% эффективно заставляет его правильно ограничивать себя, как и должно (но не будет). Затем вам нужно будет добавить position: relative к соответствующему элементу-предку элемента video, иначе видео будет абсолютно позиционировано относительно корня документа, что, скорее всего, не то, что вам нужно.

Пропуск left и right работает, потому что абсолютное позиционирование не сбрасывает позицию, просто переключает метод расчета. В качестве альтернативы вы можете установить оба свойства на ноль, тогда ваше видео будет выровнено по верхнему левому углу родительского смещения. max-width и max-height не нужны - я просто видел, как они добавляются во многих случаях, когда люди борются с ограничением своих элементов видео - не беспокойтесь.

Вы можете указать цвет фона для элемента видео или его родительского смещения. Таким образом, вы получите эффект почтового ящика - скажем, черные полосы по бокам видео.

Answer 2

Поскольку ваш video находится внутри div, это можно решить, установив для ширины и высоты видео значение 100%. Это заставляет видео занимать 100% элемента div.

Пример разметки:

<div id="video_container">
   <video></video>
</div>

стилевой:

#video_container video {
    width: 100%;
    height: 100%;
}