Mettre une vidéo d'arrière plan avec Elementor
Une vidéo d’arrière plan avec Elementor vous permet de remplacer l’image de banners par une vidéo qui est lue automatiquement en fond.
Elementor permet de mettre une vidéo en arrière-plan d’une section ou d’une colonne.
La vidéo d’arrière plan avec Elementor s’applique comme un fond de section.
Par exemple ci-dessous une vidéo mise en arrière plan d’une section interne :
Vidéo d’arrière plan de section,
permet d’afficher n’importe quel widget par dessus
Trouver une vidéo à mettre en arrière-plan sur Elementor
Les vidéos d’arrière plan avec Elementor peuvent venir de 3 sources :
- Un lien YouTube
- Un Vimeo
- De votre bibliothèque Media
Généralement passer par YouTube est intéressant dans la mesure où cela libère de l’espace sur votre serveur surtout si le clip vidéo à mettre en arrière-plan est long et donc le fichier lourd à charger.
De plus si votre visiteur à une connexion lente, c’est YouTube qui dégradera automatiquement la qualité de la vidéo pour permettre à celle-ci de tourner quand bien même le visiteur a peu de débit.
Ajouter une vidéo d'arrière plan avec Elementor sur une section ou une colonne
Une fois que vous avez trouvé une vidéo a mettre en arrière plan sur votre page Elementor :
- Copiez l’url du lien (YouTube par exemple)
- Cliquez sur la section > Style > Arrière-plan
- Sélectionnez vidéo en type d’arrière-plan et collez le lien url :
Ajuster le début et la fin d’une vidéo de fond sur Elementor
Une fois la vidéo ajoutée en fond, on peut ajuster le début de la vidéo et la fin pour couper des éléments ou garder uniquement une séquence spécifique de la vidéo.
Il suffit de spécifier l’heure du début et l’heure de fin de la vidéo en secondes :
Désactiver la vidéo d'arrière plan avec Elementor sur mobile
Enfin pour décharger les appareils mobiles il faut généralement désactiver la vidéo d’arrière plan sur mobile laissant désactivé l’option :
Lire sur mobile : Non
Et dans ce cas il faut impérativement choisir une image dans Rappel d’arrière-plan afin de remplacer la vidéo par une image dans le cas où elle ne peut pas être lue.
Par exemple sur mobile on retrouve bien l’image qui remplace la vidéo :
Partagez le hub Elementor :