HTML5 Video Respensive Vertical Cover

Question

Есть ли способ сделать видео HTML5 (и атрибут плаката) действовать как обтекаемое фоном покрытие?

Я создал фиктивную ручку вы можете играть вокруг ширины:

http://codepen.io/SEFarstad/pen/vujqE

Схема основана на двух ширины секций 50%, где левая одна будет содержать фиксированное видео и правильный будет содержать абсолютное позиционное содержимое.

Основная проблема заключается в том, что мой дизайн должен быть разделен по вертикали, что делает проблему с горизонтальным видео. Есть ли способ сделать эти горизонтальные видеоролики полной высотой в вертикальном макете, как это? - так же, как вы используете размер фона: обложка;

Я знаю, что вы можете использовать фоновое видео и т. Д., Но мне нужно, чтобы у него были элементы управления, плакаты и т. Д., Чтобы удовлетворить некоторые требования к интерактивности, которые у меня есть в этом проекте.

Answer 1

Я знаю, что это старый вопрос, и вы, вероятно, перешли к другим вещам, но я хотел ответить на всякий случай, если кто-то другой наткнется на это через Google. То, что вы искали, было object-fit, способ добавления такого поведения к видео и изображениям. Here's some info on it, но в основном вам просто нужно написать так:

video { 
    ... // other stuff here 
    object-fit: cover; 
} 

К сожалению, вы can't use this on every browser just yet. Однако есть a polyfill you can look into.