Tutorial Background video

Hi

Petit tuto pour créer un background vidéo (un fond avec une vidéo en boucle) sur un forum xenforo

Pour cela il vous faut une vidéo courte (10 a 30s), pas trop lourde en taille (- de 5Mo) et compressé aussi efficacement que possible en qualité et au format .mp4 et .vebm
( Il existe de convertisseur en ligne comme video(point)online-convert(point)com/fr)

Puis mettre vos 2 fichiers vidéos sur votre ftp




Editer le template PAGE_CONTAINER en rajoutant les lignes:

Code:

<!-- background animé-->
<video autoplay loop poster="" id="bgvid">
<source src="ma_video_perso.webm" type="video/webm">
<source src="ma_video_perso.mp4" type="video/mp4">
</video>
<!-- background animé-->

(bien sur remplacer le "ma_video_perso " par le nom de vos fichiers vidéos)
(Il faut faire quelques essais dans le Template pour l'insertion de ces lignes, perso je les ai collé avant <footer>)





Editer le template Extra.css en rajoutant les lignes:

Code:

video#bgvid {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -100;
   background: #FFFFFF no-repeat;
  background-size: cover;
}

@media screen and (max-device-width: 800px) {
   html { background: #FFFFFF no-repeat center center fixed; }
   #bgvid { display: none; }
}

Pour une démo tapez: esthauto com
(si le lien dérange pour le staff, je comprendrai pour sa suppression)