html5 video - poner - ¿Puedes mostrar HTML5<video> como fondo de pantalla completa?

video de fondo responsive html

Question

¿Cómo se puede visualizar HTML5 <video> como fondo de pantalla completa en su sitio web? Similar a esta demo del sitio Flash ...

http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617

Answer 1

Puede que sea un poco tarde para responder esto, pero esto será útil para las personas nuevas que busquen esta respuesta.

Las respuestas anteriores son buenas, pero para tener un fondo de video perfecto, debes comprobar la relación de aspecto, ya que el video podría cortarse o el lienzo alrededor se puede deformar al cambiar el tamaño de la pantalla o al usarla en diferentes tamaños de pantalla.

Me metí en este tema no hace mucho y encontré la solución usando consultas de medios.

Aquí hay un tutorial que escribí sobre cómo crear un fondo de video a pantalla completa con solo CSS

Agregaré el código aquí también:

HTML:

<div class="videoBgWrapper">
    <video loop muted autoplay poster="img/videoframe.jpg" class="videoBg">
        <source src="videosfolder/video.webm" type="video/webm">
        <source src="videosfolder/video.mp4" type="video/mp4">
        <source src="videosfolder/video.ogv" type="video/ogg">
    </video>
</div>

CSS:

.videoBgWrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
.videoBg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .videoBg{
    width: 100%;
    height: auto;
  }
}
@media (max-aspect-ratio: 16/9) {
  .videoBg {
    width: auto;
    height: 100%;
  }
}

Espero que le sea útil.

Answer 2

Solo un comentario sobre esto: he usado video HTML5 para un fondo de pantalla completa y funciona de maravilla, pero asegúrate de usar Alto: 100% y ancho: automático o viceversa, para asegurarte de mantener la relación de aspecto .

En cuanto a Ipads, puedes (aparentemente) hacer esto, al tener un evento oculto y luego forzar el clic para disparar, y hacer que la función del evento click se inicie en Load / Play ().

Ps: esto no debería requerir ningún complemento y se puede hacer con un mínimo de JS. Si se dirige a un dispositivo móvil (supongo que podría ...) mantenerse alejado de dicho marco es el camino a seguir.

Answer 3

Utilice la position:fixed en el video, ajústelo al 100% de ancho / alto, y ponga un z-index negativo sobre él para que aparezca detrás de todo.

Si miras VideoJS , los controles son solo elementos html que se encuentran en la parte superior del video, usando z-index para asegurarte de que están arriba.

HTML

<video id="video_background" src="video.mp4" autoplay>

(Agregue las fuentes de webm y ogg para admitir más navegadores)

CSS

#video_background {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1000;
}

Funcionará en la mayoría de los navegadores HTML5, pero probablemente no en el iPhone / iPad, donde el video debe activarse, y no le gustan los elementos que lo rodean.