Вписать видео в размер окна браузера

[multidem]

Подскажите пож, существует ли  способ (в теге <video>) задать размер видео по размеру браузера. Чтобы изменяя размер окна браузера видео оставалось "вписано", при этом масштабировалось и нигде не появлялись пустоты.

Вот что у меня максимум получилось: http://romaxprom.by/tmp/video/vd.html

Ролик mp4, смотрите в Хроме.

Если окно сделать узким, видео уходит вверх, а снизу появляется пустота.  

[Igor Schnaider]

Только стилями.

Что-то типа

position: fixed;
top: 50%;
left: 50;

transform: translate(-50%, -50%);

min-width: 100%;
min-height: 100%;

или

position: fixed;
top: 0;
left: 0;

width: 100%;
height: 100%;

object-fit: cover;

 

Edited April 13, 2016 by Igor Schnaider

[klierik]

html,
body {
    height: 100%;
}

video {
    display: block;
    min-height: 100%;
    min-width: 100%;
}

хотя там скролл показывается все таки... но это решается так:

body {
    overflow: hidden;
}

 

[SelenIT]

Во-первых, чтобы height: 100% применился, должна быть явно задана высота родителя (и не через min-height, а конкретно через height). Если нужно 100% от окна браузера, height: 100% должно стоять у всей цепочки предков, вплоть до html. Иначе сам контейнер video не растянется.

А уже когда он растянулся, можно применить object-fit: fill или cover, смотря какой эффект масштабирования нужен (искажение или обрезка лишнего).

[multidem]

Спасибо за ответы! Попробую, отпишусь...

[multidem]

И вот я попробовал. Все работает! Спасибо! Вот что получилось: http://romaxprom.by/tmp/video/vd_fill.html

Подскажите еще момент, пож. Я хотел бы разделить экран на 2 части и слева сделать меню сайта НЕПОДВИЖНОЕ (чтобы оно не прокручивалось с сайтом), а вправо вписать видео на весь размер правой части. У меня не получается зафиксировать левую панель, она прокручивается вместе с контентом справа. И почему-то у видео появился отступ (оно не доходит до краев браузера). Вот результат: http://romaxprom.by/tmp/video/vd1.html

[Igor Schnaider]

link

Если я правильно понял на весь размер правой части.

[multidem]

да, справа на весь экран, все правильно. Спасибо, круто!

[Int]

width: 100vw;
height: 100vh;

Так?