Установить элемент HTML5 Video для покрытия?

Question

В css фоновые изображения могут использовать свойство size обложки, это означает, что изображение всегда будет достаточно большим, чтобы заполнить пространство.

Я хочу создать этот же принцип определения размера с элементом видео HTML5. У кого-нибудь есть пример как это сделать?

Хитрость в том, чтобы выяснить соотношение ширины и высоты окна / окна, которое вы заполняете, по сравнению с видео и соответственно скорректировать.

Спасибо!

Answer 1

Если вы не возражаете против JQuery, возможно, вы захотите взглянуть на этот плагин - http://syddev.com/jquery.videoBG/

Кроме того, отличной супер всеобъемлющей статьей об использовании видео HTML5 является серия Dive into HTML5 - http://diveintohtml5.info/video.html

Answer 2

Вы можете воспользоваться свойством CSS translate, так как оно рассчитано на размер элемента, оно позволяет вам центрировать его независимо от разрешения выходного видеосигнала.

Вы можете сохранить отношения, используя min-width и min-height

position:absolute;
top: 50%;          
left: 50%;         
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);

Скрипка здесь

Answer 3

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