0

Как вставить видео, чтобы оно было во весь экран?

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 27 фев 2016 в 7:45

3 ответа 3

1

Нужно видео задать размеры через CSS, например, поставив width: 100% и height: 100vh. Но нужно видео с соответствующим пропорциями, чтобы оно правильно покрывало 100% экрана.

1

Ответ взят с официального источника 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%;
}
  • перевод собственный, почти дословный
0

если html 5 то так

  <video autoplay loop muted class="bgvideo" id="bgvideo">
   <source src="video.mp4" type="video/mp4"></source>
  </video>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.