Peut-on afficher une <vidéo> HTML5 comme arrière-plan en plein écran ?

Question

Comment afficher le HTML5 <video> comme arrière-plan plein écran de votre site web ? Similaire à cette démo de site Flash...

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

Answer 1

Utilisez position:fixed sur la vidéo, réglez-la sur une largeur/hauteur de 100 % et attribuez-lui un z-index négatif pour qu'elle apparaisse derrière tout.

Si vous regardez VidéoJS les contrôles sont juste des éléments html situés au dessus de la vidéo, utilisant le z-index pour s'assurer qu'ils sont au dessus.

HTML

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

(Ajouter les sources webm et ogg pour supporter plus de navigateurs)

CSS

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

Cela fonctionnera dans la plupart des navigateurs HTML5, mais probablement pas sur l'iPhone/iPad, où la vidéo doit être activée et n'aime pas les éléments qui la recouvrent.

Answer 2

Jetez un coup d'œil à mon plugin jquery VideoBG :

http://syddev.com/jquery.videoBG

Faites-moi savoir ce que vous en pensez :)

Answer 3

Juste un commentaire à ce sujet - j'ai utilisé la vidéo HTML5 pour un arrière-plan plein écran et cela fonctionne très bien - mais assurez-vous d'utiliser soit Height:100% et width:auto ou l'inverse - pour vous assurer de conserver le rapport d'aspect.

En ce qui concerne les Ipads, vous pouvez (apparemment) le faire en ayant un écran caché et en forçant l'événement de clic à se déclencher, et en faisant en sorte que la fonction de l'événement de clic déclenche le Load/Play().

P.s - cela ne devrait pas nécessiter de plugins et peut être fait avec un minimum de JS - Si vous visez un appareil mobile (je suppose que c'est le cas ), il est préférable de rester à l'écart d'un tel framework.

Answer 4

Donnez également un coup de pouce à http://dfcb.github.io/BigVideo.js/ semble être la solution idéale.