Comment ajouter un arrière-plan vidéo à votre site Web WordPress

L'arrière-plan vidéo est l'une des caractéristiques les plus fabuleuses d'un site Web. Cela peut non seulement rendre votre site Web vivant et intéressant, mais également afficher plus d'images et d'informations. Cependant, je parie que peu de gens savent comment ajouter un arrière-plan vidéo à leurs sites Web. Par conséquent, ce guide ultime vous sera utile si vous souhaitez ajouter un arrière-plan vidéo à votre site Web.

Utilisez un thème WordPress qui prend en charge l'arrière-plan vidéo

Certains thèmes WordPress prennent en charge l'affichage de l'arrière-plan vidéo, il vous suffit donc de configurer le thème pour le présenter.

Par exemple, ce thème Clean Blocks prend en charge l'arrière-plan vidéo dans la zone de couverture de l'en-tête. Ensuite, vous n'avez besoin que de quelques étapes simples pour y insérer une vidéo en allant dans Customizer, en trouvant la section Header Media et en suivant les exigences du thème.

La plupart des thèmes vous permettront de télécharger une vidéo. En outre, beaucoup prendront en charge les liens intégrés de YouTube comme je l'ai fait ci-dessus. Cela sera non seulement plus rapide, plus simple, mais aidera également le site Web à être plus léger, optimisant ainsi la vitesse du site Web. Chaque thème sera personnalisé de différentes manières, vous devez donc lire attentivement les instructions.

Cependant, la zone d'arrière-plan de la vidéo peut être restreinte lorsque vous utilisez des thèmes, car les thèmes peuvent uniquement prendre en charge les vidéos s'exécutant dans une certaine zone. Que faire si vous souhaitez ajouter un arrière-plan vidéo à une autre zone ? Il est temps d'utiliser un plugin pour ajouter un arrière-plan vidéo à votre site WordPress.

Utilisez un plugin pour ajouter un arrière-plan vidéo au site Web

Il existe de nombreux plugins qui peuvent vous aider avec cela. Après des recherches, j'ai trouvé que le plugin Advanced WordPress Background (AWP) est super facile à utiliser pour ceux qui ne connaissent pas grand-chose à la technologie. Il aide également votre arrière-plan vidéo à s'afficher magnifiquement et offre de nombreuses options de personnalisation.

A noter que ce plugin ne fonctionne que sur la version WordPress 5.0 et l'éditeur Gutenberg. Pensez donc à mettre à jour votre version de WordPress et à utiliser cet éditeur.

Étape 1 : Installer le plugin

Vous pouvez télécharger ce plugin sur wordpress.org, puis aller dans Dashboard > Plugin > Add New > Upload Plugin , le télécharger, l'installer et l'activer.

Ou dans Tableau de bord > Plugin > Ajouter un nouveau , recherchez le plugin et cliquez sur Installer > Activer .

Étape 2 : ajouter un arrière-plan vidéo

L'ajout d'un arrière-plan vidéo est similaire à l'insertion d'un bloc dans Gutenberg. Donc, si vous connaissez Gutenberg, c'est facile. Sinon, vous pouvez lire les instructions d'utilisation de Gutenberg.

Accédez à une page ou à un article auquel vous souhaitez ajouter un arrière-plan vidéo, ajoutez un nouveau bloc et recherchez le mot-clé « awb » pour trouver le bloc d' arrière - plan d'AWB.

Après avoir inséré ce bloc, dans la barre latérale droite, sélectionnez l'onglet Bloc pour le configurer. Il existe 3 options pour l'arrière-plan qui sont l'image, la couleur et la vidéo. Choisissez Vidéo pour insérer un arrière-plan vidéo. Ensuite, vous avez 2 options : insérer la vidéo à partir de l'URL YouTube ou Vimeo, ou télécharger des vidéos auto-hébergées.

Si vous choisissez la première option, il vous suffit d'insérer le lien dans la section URL de la vidéo .

Pour la deuxième option, rendez-vous dans la section Auto-hébergé . Il existe 3 types de formats vidéo à télécharger :

Sélectionnez le format que vous souhaitez, puis choisissez une vidéo existante dans la bibliothèque ou téléchargez-en une nouvelle. C'est ça.

Étape 3 : Personnalisez votre arrière-plan vidéo

Afficher la vidéo avec toute la hauteur et ajouter un bloc sur la vidéo

Après avoir inséré la vidéo, son cadre est si petit comme ça. Pour afficher la vidéo avec toute la hauteur, sélectionnez la section Pleine hauteur dans la barre d'outils du bloc.

Ci-dessous, l'arrière-plan vidéo affiché en pleine hauteur avec des textes. Vous pouvez personnaliser la taille, la couleur, la position, etc. des textes normalement dans l'onglet Bloc de la barre latérale. Ceci est utile si vous souhaitez mettre cette vidéo dans la couverture de l'en-tête ou dans la section d'appel à l'action.

Vous pouvez même remplacer les textes par n'importe quel bloc. Ceci est similaire à l'insertion de n'importe quel bloc Gutenberg.

Paramètres vidéo

Dans l'onglet Vidéo , vous devez définir certaines sections principales comme ci-dessous pour afficher facilement l'arrière-plan de votre vidéo :

(1) : vous pouvez activer ou désactiver la vidéo d'arrière-plan sur les appareils mobiles.
(2) et (3) : saisissez ici l'heure de début et de fin de la vidéo afin d'afficher la partie souhaitée, surtout lorsque la vidéo d'origine est trop longue.
(4) : vous pouvez répéter la vidéo lorsqu'elle est terminée. Je pense que vous devriez activer cette fonctionnalité pour conserver la lecture automatique de la vidéo.

Paramètres de l'image de l'affiche

En défilant vers le bas, vous verrez la section Image de l' affiche . La photo que vous choisissez ici s'affichera 1 seconde avant l'affichage de la vidéo. Les options ci-dessous vous permettent de personnaliser la taille et le style appropriés de l'image.

Voici le résultat après avoir ajouté l'image de l'affiche.

Installer la superposition

(1) est la couleur de superposition de l'arrière-plan de la vidéo et (2) est la transparence de la superposition. Par exemple, l'orange étant le ton majeur de mon site, j'ai donc choisi cette couleur pour la superposition de la vidéo afin qu'elle corresponde au design du site Web.

Quant à la palette de couleurs , c'est une alternative à la vidéo. En d'autres termes, vous passez en fait d'un arrière-plan vidéo à un arrière-plan couleur. Pour supprimer ce fond de couleur, choisissez le bouton Effacer.

Installer les effets Parallax et Mouse Parallax

Dans l'onglet Parallaxe , vous pouvez activer ou désactiver ces effets et choisir facilement différents types de parallaxe. C'est un effet très agréable et intéressant, vous devez donc l'utiliser et choisir un style adapté à votre site.

L'effet de parallaxe vous est peut-être familier, contrairement à l'effet de parallaxe de la souris. Cela peut être facilement vu lorsque vous déplacez la souris sur la vidéo, puis la scène dans la vidéo se déplacera également.

Vous pouvez utiliser cet effet en allant dans la section Parallaxe de la souris > Activer . Ensuite, vous pouvez ajuster la taille et la vitesse . Plus la vitesse est faible, plus la vidéo se déplace rapidement. Plus la taille est petite, plus la vidéo bouge, vous donnant l'impression que la vidéo est « saccadée » lorsque vous déplacez la souris dessus.

Voici un exemple lorsque je choisis la vitesse et la taille les plus faibles.

Paramètres d'espacement

Dans l'onglet Espacement , personnalisez la distance entre la vidéo et la marge de la page, entrez les paramètres de distance dans les sections Marge et Remplissage . Par exemple, j'ai entré le padding de 10 et la marge de 20 pour les 4 côtés de la vidéo.

Réglages avancés

Dans CSS supplémentaire de la section Avancé , vous pouvez ajouter un code personnalisé pour l'arrière-plan de la vidéo. Et la section d'ancrage HTML vous permet d'utiliser le lien de mot-clé pour le titre de la vidéo. Si vous ne connaissez rien aux shortcodes, vous pouvez ignorer cette partie.

Et voici le résultat final. La vidéo a l'air plutôt sympa, n'est-ce pas ?

Derniers mots

Grâce à cet article super détaillé, j'espère que vous pourrez ajouter un arrière-plan vidéo à votre site WordPress pour attirer les visiteurs. À propos des plugins AWB, vous devez l'utiliser avec un thème qui supporte fortement Gutenberg tel que eStar. Ici, j'ai utilisé le thème eStar et le plugin AWB pour avoir un arrière-plan vidéo attrayant pour la couverture de l'en-tête.

Cette combinaison parfaite peut rendre la vidéo plus fascinante, n'est-ce pas ? Si vous souhaitez en savoir plus sur WordPress, n'hésitez pas à commenter et à partager vos réflexions sous cet article.