Как вставить видео, чтобы оно было во весь экран?
3 ответа
Нужно видео задать размеры через CSS, например, поставив width: 100% и height: 100vh. Но нужно видео с соответствующим пропорциями, чтобы оно правильно покрывало 100% экрана.
Ответ взят с официального источника developer.mozilla.org: Using fullscreen mode
Давайте рассмотрим этот элемент:
<video controls id="myvideo"> <source src="somevideo.webm"></source> <source src="somevideo.mp4"></source> </video>
Мы можем перевести это видео в полноэкранный режим режим следующими скриптами:
var elem = document.getElementById("myvideo"); if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); }
Движек Gecko автоматически добавляет CSS правила к элементу, чтобы растянуть его для заполнения экрана:
"width: 100%; height: 100%"
. WebKit этого не делает; вместо этого происходит центрирование полноэкранного элемента по размеру вероятной черной области. Для получения необходимого полноэкранного поведения в движке WebKit, необходимо самостоятельно добавить собственные"width: 100%; height: 100%;"
CSS правила к элементу::-webkit-full-screen #myvideo { width: 100%; height: 100%; }
- перевод собственный, почти дословный
если html 5 то так
<video autoplay loop muted class="bgvideo" id="bgvideo">
<source src="video.mp4" type="video/mp4"></source>
</video>