Видео на весь экран

21 Марта 2016
css

Для корректной работы видео в разных браузерах, нужно конвертировать ваше видео в 3 формата mp4, ogv и webm

В данном примере видео будет автопроизводиться - autoplay, без звука - muted, зацикленное видео - loop, начать воспроизводить до окончательной загрузки видео preload

<video preload autoplay loop muted>
	<source src="video.mp4" type="video/mp4"/>
	<source src="video.ogv" type="video/ogg"/>
	<source src="video.webm" type="video/webm"/>
</video>

Стили делают видео во весь экран, в принципе ничего особенного кроме стиля object-fit, который и преобразует наше видео во весь экран независимо от разрешения экрана

video{
	position:fixed;
	z-index:-100;
	left:0;
	top:0;
	right:0;
	bottom:0;
	height:100%;
	width:100%;
	object-fit:cover;
}