Как сделать относительное позиционирование html-видео отзывчивым

Question

Мне интересно, возможно ли сделать относительное позиционированное html5-видео адаптивным.Другими словами, автоматическое изменение размера видео с правильным соотношением сторон.

Есть идеи?

Answer 1

используйте это,

video {
    width: 100%;
    height: auto;
}

это даст ширину: 100% и высоту: авто в соответствии с соотношением сторон ...

Answer 2

Да, это возможно.Например, с помощью CSS:

#video-id {
    width: 100%;
    height: auto;
}

Или непосредственно в HTML:

<video width="100%" ... 

Поскольку ширина видео масштабируется на основе его родительской ширины, высота auto будет автоматически масштабироваться с правильнойсоотношение сторон.И наоборот, для автоматического масштабирования ширины к высоте.

Обратите внимание, что в версии HTML оставьте высоту пустой (или ширину, если вы укажете height="100%"), чтобы сохранить статус auto.

В CSS вместо установки width или height на 100% может потребоваться установить max-width: 100% и т. Д., А на больших экранах видео не будет расширяться за пределы исходного разрешения.

Оригинальный источник , описывающий видео ширины жидкости.

Answer 3

Просто используйте% или vw, vh как единицы измерения ширины и высоты.

<video width="96%" height="54%" controls>
  <source src="movie.mp4" type="video/mp4">
</video>