Cómo crear: video a pantalla completa

Aprende a crear un fondo de video a pantalla completa usando CSS.

Cómo crear un video a pantalla completa

Paso 1 - Añadir HTML：

<!-- Vídeo -->
<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
</video>
<!-- Opcional: algunos textos de cobertura para describir el video -->
<div class="content">
  <h1>Encabezado</h1>
  <p>Lorem ipsum...</p>
  <!-- Usar el botón para detener/reproducir el video a través de JavaScript -->
  <button id="myBtn" onclick="myFunction()">Pause</button>
</div>

Paso 2 - Agregar CSS:

/* Establecer el estilo del video: anchura y altura al 100% para cubrir toda la ventana */
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
/* Añadir algunos contenidos en la parte inferior del video/página */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}
/* Establecer el estilo del botón utilizado para detener/reproducir el video */
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}
#myBtn:hover {
  background: #ddd;
  color: black;
}

Paso 3 - Agregar JavaScript:

O, puedes agregar JavaScript para que se detenga/reproduzca el video con solo hacer clic en el botón:

Ejemplo

<script>
// Obtener el video
var video = document.getElementById("myVideo");
// Obtener el botón
var btn = document.getElementById("myBtn");
// Detener y reproducir el video, y cambiar el texto del botón
function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } else {
    video.pause();
    btn.innerHTML = "Reproducir";
  }
}
</script>

亲自试一试