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.
Merci à Ghazal pour ses éclairages sur le javascript
fond site :
{up bg-video=fichier video}
fond bloc :
{up bg-video=fichier video}
content{/up bg-video}
video
- 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é
paramètres de la vidéo
- 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
transparence du contenu de la page
- page-selector: bloc sur contenu
- page-overlay: background de page-selector (png, opacité, RGBA, CSS)
options secondaires
- center: style et classe pour centrage vertical du contenu entre shortcodes
- filter: conditions. Voir doc action filter (v1.8)
- id: identifiant
- style: classes et style inline pour bloc créé
- class: classes pour bloc créé (deprecated)
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
gestion tarteaucitron
- height (h,hauteur) = 400px: hauteur d'une video Youtube ou Vimeo avec tarteaucitron
- rgpd = 1: 0 pour ne pas appliquer la règle pour le RGPD
- Version 2.9
- ajout option RGPD pour ne pas appliquer localement la règle générale
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);
Attention:
Pour obtenir un effet de bandeau, il faut prévoir que l'image sera plus carrée sur un mobile.
Ci-contre, la vidéo utilisée pour le bandeau de l'exemple. Redimensionnez votre navigateur pour tester la partie affichée selon la largeur d'écran.
Il est aussi possible de définir des hauteurs de bandeau selon la largeur. Utilisez les médiaqueries ou les classes UP.
Avec style=minh400 minhm200 minhs100
la hauteur sera de 400px sur grand écran, 200 sur tablette et 100 sur mobile.