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 :


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 :

  1. Copiez l’url du lien (YouTube par exemple) 
  2. Cliquez sur la section > Style > Arrière-plan
  3. Sélectionnez vidéo en type d’arrière-plan et collez le lien url : 
video d'arriere plan avec elementor

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 : 

video arriere plan section

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 

video background mobile

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 : 

video arriere plan

Partagez le hub Elementor :