Anthony
NICOLAIEFF

Ajouter une vidéo en arrière plan

Tutoriel pour ajouter une vidéo en arrière plan d'une section avec Elementor
SOMMAIRE

ETAPE 1 : Créer une nouvelle page

Pour l’exemple, partons sur une nouvelle page !

Pour afficher une vidéo en arrière plan de la première section, vous pouvez passer sur le modèle de page « Elementor Canevas » en cliquant sur la roue crantée en bas à gauche « Réglages », supprimant ainsi le Header et le Footer.

Cette étape est facultative, dépendant de votre thème et de votre envie.

Changer de modèle de page avec Elementor
Gestion des modèles de page via Elementor

ETAPE 2 : Créer une nouvelle section adaptée à l'écran

Créez une nouvelle section en cliquant sur le bouton + Rouge sur le coté droit de votre écran. Cliquez sur modifier la section et sélectionnez « Adapté à l’écran » dans le champ « Hauteur », cela permettra à la section d’occuper toute la hauteur de l’écran du visiteur.

En faisant cette étape, vous pourrez ajouter du contenu en premier plan tout en laissant la  vidéo en arrière plan.

Sélectionnez hauteur adaptée à l'écran pour ajouter un effet immersif
Section > Contenu > Hauteur : "Adapté à l'écran"

ETAPE 3 : Ajouter la vidéo en arrière plan

Rendez-vous sur l’onglet « Style » de votre section, puis sélectionner l’icône caméra dans la partie « Arrière-plan ».

Vous pouvez ensuite entrer le lien Youtube, Vimeo ou de votre propre vidéo .mp4 dans le champ « Lien de la vidéo« .

Plusieurs paramétrages supplémentaires sont possibles : 

  • Vous pouvez déterminer le début de la vidéo en secondes
  • Vous pouvez laisser la vidéo tourner en boucle ou sélectionner « Jouer une unique fois » pour lire la vidéo qu’une seule fois.
Option d'Elementor permettant d'ajouter une vidéo
Section > Style > Lien de la vidéo

ETAPE 4 : Ajouter un filtre pour voir le contenu

Si vous souhaitez ajouter un titre et du contenu par dessus votre vidéo en arrière plan, il est préférable d’ajouter un « calque » permettant une meilleure lisibilité du contenu.

Pour cela, dans l’onglet « Style », rendez-vous sur le paramétrage « Superposition d’arrière-plan », sélectionnez une couleur (souvent foncé, pour du contenu clair et inversement) puis déterminez l’opacité. Plus elle sera proche de 1, moins vous verrez la vidéo en arrière plan.

Option permettant d'ajouter un filtre à la vidéo en arrière plan
Section > Style > Superposition d’arrière-plan > Couleur + Opacité

ETAPE 5 : Ajouter votre contenu en premier plan

A présent, vous pouvez ajouter le contenu au dessus de la vidéo en utilisant les widgets Elementor habituels : Titre, texte, bouton …

N’oubliez pas de sauvegarder et de tester une fois terminé !

Etape pour ajouter du texte par dessus la vidéo
Ajoutez votre contenu avec les modules d'Elementor

Conseil Bonus

Je vous recommande d'utiliser des vidéos Youtube ou Viméo et d'éviter les fichiers mp4 directement déposés sur votre serveur/hébergement. Cela peut alourdir la page en particulier sur la version mobile

Concepteur de site web freelance entre Saint Etienne et Lyon

Spécialisé dans l’utilisation d’Elementor depuis 2019, je vous apporte une aide personnalisée lors de la création de votre site web.

Retrouvez tous mes tutos Elementor

Blocage Elementor

30 min pour vous aider

Vous n’avez pas la solution pour faire ce que vous souhaitez sur Elementor ou WordPress lors de la création de votre site ?
Je vous propose de vous aider ou de vous conseiller gratuitement afin d’avancer sereinement sur votre projet.