bg-video ~ en fond de site ou d'un bloc de contenu

Le but de cette action est de mettre une vidéo comme décoration / animation en fond de site ou dans un bloc.
Donc, les vidéos démarrent automatiquement, sont silencieuses et n'ont aucun dispositif de contrôle.

réalisé sur la base du script videoBackground de lemehovskiy modifié pour gérer le centre de recadrage.
Merci à Ghazal pour ses éclairages sur le javascript

Position de la vidéo

en fond de contenu

Comme de coutume avec UP, un simple shortcode permet d'obtenir l'effet ci-dessus

{up bg-video=images/video/pigeon.mp4
  | bg-position=0% 20%
  | bg-overlay=02.png
  | center=mright
  | style=minh200 t-blanc tr pr2 b fs200 ombreMax
}
  <p>une video comme accroche, <br>c'est génial !</p>
{/up bg-video}

en fond de site

Les chiffres verts qui défilent sur le fond du site sont mis en place par ce simple shortcode :

{up bg-video=images/video/matrix.mp4 
  | poster=images/video/matrix.jpg
  | mobile
  | bg-overlay=linear-gradient(180deg, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.8) 80%)
  | page-selector=#sp-main-body > .container
  | page-overlay=#fffe}

• l'argument principal (bg-video) est la référence de la vidéo
• poster est totalement inutile car l'image de remplacement a le même nom et se trouve dans le même dossier que la vidéo. Cette information est conseillée/indispensable pour une vidéo sur youtube/vimeo
• mobile indique que la vidéo ne sera pas affichée sur un smartphone. L'image définie par poster ou de même nom que la vidéo sera utilisée en remplacement.
• bg-overlay définit la méthode pour atténuer l'impact visuel de la vidéo. Ici, un dégradé noir vertical
• page-selector est le sélecteur CSS de l'espace avec le contenu de votre site sur lequel on appliquera une atténuation définie par page-overlay.

{up addclass=up-bgvid-inner | css-head=body.up-bgvid-inner[overflow:auto]}

Origine des vidéos

L'action option principale bg-video doit contenir la référence de la vidéo utilisée. Ce peut-être :

• chemin et nom d'un fichier : il suffit de mettre tous les fichiers nécessaires dans le même dossier avec le même nom. UP va se débrouiller pour construire le code qui correspond. Les formats vidéo pris en charge sont : mp4, webm et ogv. Pour les images alternatives : jpeg, jpg, png.
• identifiant Youtube : c'est le code à la fin de l'URL Youtube après 'v='
• identifiant Vimeo : c'est le code à la fin de l'URL Vimeo

Vidéo sur Youtube

{up bg-video=cjkS6sA1aeE 
  | poster=images/video/attente.jpg
  | mobile=images/video/attente.jpg
  | style=min-height:300px; b tc fs200 t-jaune
  | center
}
	le Joomladay 2018 sur youtube
{/up bg-video}

Les options

Position et cadrage

La vidéo occupe toujours la totalité de la surface du bloc. Cela nécessite de la recadrer. Par défaut, on utilise son centre comme point de référence, mais il peut être judicieux d'indiquer la position de l'élément important. L'option bg-position permet de définir la position horizontale et verticale en pourcentage.

Cette information est utilisée pour le recadrage de l'image d'attente (poster). Dans les exemples ci-dessous, cette image a des flèches bleues pour faciliter son identification.

Si une seule valeur est fournie, on considère que la deuxième est identique. Dans le 3ème exemple, 100% est équivalent à 100% 100%

Petit rappel : lors d'un recadrage, selon l'orientation du bloc, on coupe en haut et en bas ou à gauche et à droite, mais jamais les 4 côtés.

Poster : image attente

Si une image jpg, jpeg ou png de même nom que la vidéo est disponible dans son dossier, elle sera affichée le temps du chargement du fichier.

Pour les vidéos youtube ou vimeo, il est fortement conseillé d'indiquer l'emplacement d'une image d'attente avec l'option poster.

La valeur de bg-color est également utilisée pour le fond sous la vidéo.

bg-overlay & page-overlay

Ces 2 options permettent d'ajouter un masque pour faciliter le lecture du contenu. le masque bg-overlay recouvre la totalité de la vidéo alors page-overlay se concentre sur la partie contenu défini par page-selector

La valeur peut-être de 4 types :

• niveau de transparence sous la forme 80%
• masque coloré avec transparence au format #RGBA. Exemple : #FF000080 pour un masque rouge à 50%
• image png répétée.
• valeur CSS pour la propriété background

Consulter la section overlay de bg-slideshow pour plus d'informations

bg-ratio

Cette option permet de définir le rapport largeur/hauteur de la vidéo. Par défaut à 16/9, les valeurs courantes sont 4/3, 16/10

Youtube insère des cookies sur le poste de l'internaute. Vous devez prévenir les utilisateurs et le gérer dans vos conditions d'utilisation.

Si vous utilisez TarteAuCitron, depuis la version 2.4, cette action va générer automatiquement, en respect du RGPD, le code attendu pour les vidéos Youtube et Vimeo.

Note : une option height a été ajoutée pour gérer la hauteur de la vidéo uniquement dans ces 2 cas.

Je vous conseille d'utiliser des vidéos hébergées sur votre serveur pour ne pas perturber le rendu de la page.