Имеем некий блок <video></video>
<video data-showcase-video webkit-playsinline poster="/videos/Oka_copyrightdownloopscom.jpg" loop autoplay>
<source src="/videos/background.webm" type="video/webm" />
<source src="/videos/background.mp4" type="video/mp4" />
<source src="/videos/background.ogg" type="video/ogg" />
</video>
Само видео размером 800 на 600 пикселей
его css
position: absolute;
z-index: 0;
top: 0px;
left: 0px;
width: 100%;
height: auto;
max-width: 100%;
backface-visibility: hidden;
Для того чтобы это видео растягивалось по горизонтали при увеличении разрешения экрана (например широкоформатый монитор), достаточно указать свойство
width: 100%; - это работает
Логично предположить чтобы растянуть видео по вертикали указать height: 100%;
Но это не работает. Свойство width: 100%; в этом случае отключается и по краям экрана имеет черные квадраты.
Как без применения js, растянуть видео и по вертикали тоже?
<video data-showcase-video webkit-playsinline poster="/videos/Oka_copyrightdownloopscom.jpg" loop autoplay>
<source src="/videos/background.webm" type="video/webm" />
<source src="/videos/background.mp4" type="video/mp4" />
<source src="/videos/background.ogg" type="video/ogg" />
</video>
Само видео размером 800 на 600 пикселей
его css
position: absolute;
z-index: 0;
top: 0px;
left: 0px;
width: 100%;
height: auto;
max-width: 100%;
backface-visibility: hidden;
Для того чтобы это видео растягивалось по горизонтали при увеличении разрешения экрана (например широкоформатый монитор), достаточно указать свойство
width: 100%; - это работает
Логично предположить чтобы растянуть видео по вертикали указать height: 100%;
Но это не работает. Свойство width: 100%; в этом случае отключается и по краям экрана имеет черные квадраты.
Как без применения js, растянуть видео и по вертикали тоже?