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
➠ bg_video : Affiche une video locale ou youtube en fond de site ou dans 'un bloc

Cliquer pour lire la documentation

syntaxe {up bg-video=fichier video}
syntaxe {up bg-video=fichier video}content{/up bg-video}
author LOMART version 1.0 license GNU/GPLv3 credit Script videoBackground de lemehovskiy
  • bg_video: fichier video ou ID video Youtube.
  • poster: fichier image affiché avant chargement vidéo
  • mobile: image ou css si un appareil mobile est détecté
  • bg-selector=body: bloc portant le slideshow
  • bg-position=50% 50%: 50% 50% = position poster et video
  • bg-ratio=16/9: proportion de la video
  • bg-overlay: calque superposé à l'image de fond (png, opacité, RGBA, CSS)
  • bg-color: couleur de fond sous la vidéo lors chargement
  • page-selector: bloc sur contenu
  • page-overlay: background de page-selector (png, opacité, RGBA, CSS)
  • center: style et classe pour centrage vertical du contenu entre shortcodes
  • style: classes et style inline pour bloc créé
  • class: classes pour bloc créé (deprecated)
  • base-css: règles CSS définies par le webmaster (ajout dans le head)

    Position de la vidéo

    en fond de contenu

    une video comme accroche,
    c'est génial !

    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}
    • bg-video : chemin vers la vidéo ou id youtube/vimeo
    • bg-position : permet de gérer le centre pour les recadrages
    • bg-overlay : une image superposée à la vidéo pour faciliter la lecture du texte
    • center : pour centrer verticalement le contenu entre shortcodes. on indique la classe mright pour aligner à droite le contenu. Il était aussi possible de saisir directement le style CSS : margin-left:auto;margin-right:0. (nouveauté de la version 1.5 de UP)
    • class : pour définir la hauteur minimale et des enrichissements pour le contenu. Cela est équivalent à l'option style=min-height:200px;color:whitetext-align:right;padding-right:20px;font-weight:bold;font-size:200%;box-shadow: 0 5px 5px 0 rgba(0,0,0,0.25),0 2px 10px 0 rgba(0,0,0,0.16);

    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.

    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



    le Joomladay 2018 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.

    non précisé
    50% 50% par défaut
    0% 0%
    en haut à gauche
    100%
    en bas à droite
    20% 50%
    décalage horizontal 20%

    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