Comment ajouter un widget vidéo sur Elementor

Dans ce tutoriel, je vais vous montrer comment ajouter un widget vidéo à notre site web en utilisant le célèbre constructeur de pages Elementor.

N’hésitez pas à truffer vos pages de vidéos, car cela présente un intérêt pour le référencement SEO de votre site. En effet :

• cela augmente le « dwell time« , le temps de présence des visiteurs sur vos pages, que mesure Google et qui est un facteur de classement
• cela augmente la valeur sémantique de votre page

C’est une façon géniale de rendre votre contenu interactif et vivant !

Étape 1 : Installer Elementor

D’abord, assurez-vous que notre ami Elementor est bien installé et prêt à embellir votre site WordPress. Ce n’est pas le cas ? Ne vous inquiétez pas, car c’est  un jeu d’enfant.

Allez dans votre tableau de bord WordPress, puis dans « Extensions » et cliquez sur « Ajouter ».

Tapez « Elementor » dans la barre de recherche, installez-le et activez-le.

Et voilà, il est maintenant disponible. Vous pouvez créer de nouvelles pages et articles avec Elementor.

Vous voyez ? Facile comme bonjour !

Étape 2 : Accéder à l’éditeur Elementor

Avec Elementor, ouvrez la page où vous voulez insérer cette merveilleuse vidéo.

Si c’est une page ou un article existant, cliquez sur « Modifier avec Elementor » ; sinon, créez l’article ou la page, et ouvrez-le ou la avec Elementor.

Étape 3 : Ajouter le widget vidéo

Trouver le widget vidéo

Dans la barre latérale gauche, cherchez le widget vidéo.

Utilisez la barre de recherche et tapez « vidéo« , ou scannez dans les différentes catégories de widgets, en fonction des add-ons que vous avez installés.

Il se peut que vous ayiez plusieurs widgets vidéo disponibles – en effet, des bibliothèques de widgets comme Ultimate Addons for Elementor, Happy Addons et autres, en ajoutent de nouveaux ; certains thèmes aussi peuvent en proposer. Dans ce tuto, nous utiliserons celui d’Elementor.

Ajouter le widget vidéo à la page

Cliquez sur ce widget vidéo en gardant le bouton de la souris appuyé, et faites-le glisser depuis la barre latérale gauche jusqu’à l’endroit souhaité sur votre page.

Étape 4 : Configurer le widget vidéo

Choisir la source de la vidéo

Dans l’onglet « Contenu » du widget vidéo, sélectionnez la source de votre vidéo.

Vous pouvez opter pour YouTube, Vimeo, Dailymotion, VideoPress, ou même un fichier vidéo auto-hébergé sur votre propre serveur.

La différence principale entre ces solutions sera le temps de chargement et la qualité de l’image :

• YouTube est le leader mondial, il sert donc la vidéo plus vite que ses concurrents
• par contre, Vimeo propose de plus hautes qualités d’image, si c’est important pour vous (genre, vous êtes vidéaste ou réalisatrice)
• les vidéos auto-hébergées seront servies depuis votre propre serveur : il faut donc qu’il soit assez puissant et rapide pour servir la demande, et si cette demande est forte… vous feriez peut-être mieux de choisir un service plus pro

Entrer l’URL de la vidéo

Saisissez l’URL de votre vidéo dans le champ « lien ».

Pour les vidéos YouTube, Vimeo ou Dailymotion, copiez simplement l’URL de la page de la vidéo. Pour un fichier vidéo hébergé sur votre serveur, copiez l’URL du fichier, après l’avoir téléchargé sur votre site dans la médiathèque (en colonne de droite, vous trouverez cette url).

Paramétrer les options

Avec Elementor, vous avez le pouvoir de contrôler comment votre vidéo sera lue sur votre site.

Vous pouvez choisir de

• démarrer et stopper la vidéo automatiquement à des moments définis,
• activer ou désactiver les contrôles de lecture,
• activer ou désactiver le son,
• faire tourner la vidéo en boucle (utile si la vidéo est un background à des fins purement graphiques)
• et bien plus encore.

L’option « Chargement différé » permet de dire au navigateur de ne charger la vidéo que quand l’internaute arrive à son niveau (s’il y arrive) : il est conseillé de l’activer car à quoi bon ralentir le chargement de la page pour une vidéo qui ne sera peut-être pas lue, si elle est placée en milieu ou fin de page ?

Vous pouvez aussi « Superposer une image« , qui prendra la place de la vidéo jusqu’à ce qu’elle soit lue.

Par exemple dans la vidéo suivante, j’affiche une vignette, je mets la vidéo en boucle, j’affiche les contrôles du lecteur (play, pause etc) et je charge en différé :