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

Vous recherchez le moyen le plus simple d' ajouter un arrière-plan vidéo WordPress ?

Des arrière-plans vidéo bien conçus attirent l'attention et donnent aux marques un aspect cool dès le début. Mais lorsqu'il est mal fait, un arrière-plan vidéo ralentit votre site, prend de la place et déroute les nouveaux visiteurs. C'est pourquoi nous avons créé ce guide afin que vous puissiez éviter tous les pièges et, à la place, apprendre à ajouter un arrière-plan vidéo WordPress de la bonne manière.

Continuez à lire pour en savoir plus sur les meilleures pratiques et les étapes pour ajouter un arrière-plan vidéo à votre site Web WordPress, le tout sans aucune connaissance technique particulière.

Meilleures pratiques pour ajouter un arrière-plan vidéo WordPress

• Maintenez des tailles de fichiers faibles mais une résolution élevée : rien ne ralentit davantage les performances de votre site que les vidéos et les images volumineuses ; pourtant, il est préférable de maintenir la résolution pendant la compression.
• N'en faites pas trop : trop de vidéos encombrent votre interface ; ne les utilisez que pour faire valoir un point ou présenter quelque chose de pertinent.
• Incluez un appel à l'action avec des informations supplémentaires : ne laissez pas les téléspectateurs en vouloir plus, puis oubliez un lien menant à des détails supplémentaires.
• Évitez l'audio à tout prix : c'est choquant quand tout le monde veut juste voir votre site Web.
• Si l'audio est requis, ne l'ayez pas en lecture automatique : fournissez une option permettant aux utilisateurs de lire l'audio.
• Pensez aux sous-titres codés pour les vidéos avec audio : tout le monde ne peut pas écouter votre audio, que ce soit en raison de leur emplacement ou d'une déficience auditive.
• Héberger en externe : l' hébergeur de votre site n'est probablement pas conçu pour diffuser des vidéos, alors choisissez des sites comme Vimeo et YouTube pour maintenir les performances, ou envisagez un site d'hébergement vidéo spécialisé.
• Respectez les meilleurs formats/résolutions : nous ne parlons que de MP4 ; un minimum de 720p ; codec h264.

Et n'oubliez pas que tous les sites Web n'ont pas besoin de vidéo. parfois, cela rend l'interface encombrée, lente et floue. Un avocat, par exemple, devrait s'en tenir à des photos professionnelles plutôt qu'à des vidéos de poignée de main ringardes qui ne manqueront pas de ralentir son site Web.

Comment ajouter un arrière-plan vidéo WordPress

Il existe plusieurs méthodes qui activent les fonctionnalités d'arrière-plan vidéo dans WordPress.

Nous allons nous concentrer sur quatre solutions sans code différentes :

1. Le bloc Cover intégré
2. Un plugin d'arrière-plan/en-tête
3. Votre plugin de création de page préféré
4. Utilisation d'un thème prenant en charge les arrière-plans ou les en-têtes vidéo

Suivez les étapes pour chaque méthode ci-dessous.

Option 1 : Bloc de couverture intégré

L'éditeur WordPress natif propose ce qu'on appelle un bloc de couverture pour insérer des images d'arrière-plan derrière d'autres contenus, tels que du texte et des boutons.

Ce que de nombreux utilisateurs de WordPress ne réalisent pas, c'est que le bloc Cover prend également en charge les arrière-plans vidéo.

Étape 1 : Ajouter le bloc Cover

Pour commencer, accédez à la page sur laquelle vous souhaitez ajouter l'arrière-plan et ajoutez le bloc Couverture .

Étape 2 : Téléchargez votre vidéo

Pour la couverture , choisissez le bouton Télécharger ou Bibliothèque multimédia , selon celui que vous avez l'intention d'utiliser pour ajouter une vidéo.

Le bloc Cover ne dit rien sur la prise en charge des vidéos, il vous suffit donc de vous assurer de choisir une vidéo (comme un MP4) dans la médiathèque . Cliquez sur le bouton Sélectionner une fois que vous avez coché une vidéo.

Étape 3 : Insérer le contenu de premier plan superposé

Vous devriez maintenant voir un aperçu de la vidéo d'arrière-plan. Vous pouvez ajouter des blocs de premier plan à la couverture , tels que du texte ou des boutons.

Étape 4 : Modifiez les paramètres de couverture selon vos besoins

Les paramètres de couverture incluent :

• Superpositions de couleurs : idéales pour faciliter la lecture du texte
• Opacité : également utile pour révéler le contenu de premier plan
• Hauteur minimale de couverture : parfois nécessaire pour faire en sorte que l'arrière-plan de la vidéo WordPress couvre plus d'espace

Étape 5 : Affichez votre arrière-plan vidéo WordPress en action

Une fois que vous avez terminé, enregistrez la page et accédez au frontend pour voir votre arrière-plan vidéo WordPress !

Il existe de nombreux plugins pour ajouter des arrière-plans vidéo WordPress, dont certains offrent des arrière-plans de site complets, tandis que d'autres sont conçus pour vous donner un en-tête vidéo.

Ce sont les meilleurs plugins d'arrière-plan vidéo :

️ Notre préféré est le plugin Advanced WordPress Backgrounds ; nous allons vous montrer comment ajouter un arrière-plan vidéo WordPress avec ce plugin en quelques étapes seulement.

Étape 1 : Installer AWB et ajouter son bloc de contenu

Pour commencer, installez Advanced WordPress Backgrounds (AWB).

Accédez à la page où vous souhaitez ajouter la vidéo d'arrière-plan.

À l'aide de l'éditeur WordPress, cliquez pour ajouter un bloc de contenu. Recherchez et sélectionnez le bloc Arrière-plan (AWB) .

Étape 2 : Ajoutez votre vidéo

Cela vous donne des options pour ajouter des arrière-plans de couleur, d'image ou de vidéo à l'élément.

Choisissez Vidéo , puis collez une URL de vidéo de YouTube ou Vimeo. Comme alternative, le plugin a un onglet auto-hébergé pour télécharger des vidéos locales.

Étape 3 : Augmentez la hauteur et la largeur de l'arrière-plan de la vidéo

Par défaut, le bloc de contenu ne s'étend pas pour couvrir une grande partie de la zone de la page. Vous devez cliquer sur le bouton Pleine hauteur dans l'éditeur. Il y a aussi un bouton pour étendre l'arrière-plan de la vidéo sur toute la largeur.

Vous pouvez également faire glisser ou insérer du contenu, tel que du texte, des boutons ou des images, au-dessus de la vidéo d'arrière-plan.

Étape 4 : Modifier les paramètres d'arrière-plan de la vidéo WordPress

Ajustez le paramètre que vous souhaitez dans l'onglet Bloc : heure de début, heure de fin, boucle, toujours en lecture, opacité de la vidéo.

Il est judicieux d'ajouter une superposition de couleur d'arrière-plan avec une opacité réduite ; cela rend le texte superposé plus facile à lire.

Pour ce faire, accédez à l'onglet Bloc et modifiez la couleur en blanc ou en noir sous Couleur d' arrière -plan . Déplacez légèrement le curseur Opacité pour vous assurer que l'arrière-plan est toujours visible.

Étape 5 : Afficher les résultats

Le résultat est une vidéo lue devant un autre contenu, idéalement une vidéo qui boucle, n'a pas de son et garde toujours l'essentiel de l'attention sur le contenu de premier plan.

Option 3 : Votre plugin de création de page préféré

La plupart des constructeurs de pages, comme Elementor, WPBakery et Divi, offrent des fonctionnalités d'arrière-plan pour ajouter une image ou une vidéo en arrière-plan à presque tous les modules de contenu.

️ N'hésitez pas à choisir le constructeur de page de votre choix, mais nous recommandons Elementor en raison de sa facilité d'utilisation.

Assurez-vous d'installer Elementor ou le constructeur que vous avez l'intention d'utiliser avant de commencer.

Étape 1 : Ouvrir une page avec l'éditeur Elementor

Accédez à Pages sur WordPress et sélectionnez la page désignée comme votre page d' accueil . Cliquez sur le bouton Modifier avec Elementor .

Étape 2 : Ajouter un bloc de contenu de section

La plupart des modules de contenu dans Elementor proposent des paramètres d'arrière-plan, mais nous vous recommandons d'insérer une section. De cette façon, vous pouvez ajouter plusieurs éléments dans la section, comme du texte, des images et des boutons. Ensuite, vous ajoutez un arrière-plan vidéo à la section afin qu'il soit derrière tout ce qui se trouve au premier plan.

Nous avons ajouté du texte et un bouton à une section de notre didacticiel. Allez-y et sélectionnez l'icône Modifier la section , puis sélectionnez l'onglet Style .

Étape 3 : Insérez l'arrière-plan de votre vidéo

Ici, vous verrez une zone déroulante Arrière -plan. Choisissez l'option Vidéo à côté de Type d' arrière -plan . Collez ensuite une URL de YouTube, Vimeo ou d'un fichier local dans le champ Lien vidéo .

Étape 4 : Modifier les paramètres d'arrière-plan de la vidéo

Vous devrez peut-être agrandir l'arrière-plan de la vidéo pour occuper une plus grande partie de l'écran. Pour ce faire, passez à l'onglet Disposition et ajustez Hauteur et Hauteur minimale .

De retour sous l'onglet Style , envisagez de modifier les paramètres de la vidéo d'arrière-plan :

• Heure de début
• Heure de fin
• Jouer une fois
• Jouer sur mobile
• Mode de confidentialité

De plus, pensez à ajouter une superposition d' arrière -plan - généralement une couleur neutre comme le noir ou le blanc, et quelques changements d'opacité - pour rendre le texte, les boutons et les images au premier plan plus visibles.

Étape 5 : Affichez l'arrière-plan de la vidéo WordPress sur le frontend

Lorsque vous avez terminé, la vidéo est lue derrière tout le contenu de la section !

Option 4 : Utiliser un thème WordPress prenant en charge les arrière-plans/en-têtes vidéo

Divers thèmes WordPress offrent des paramètres intégrés d'en-tête, de curseur et de média pleine page ; ceux-ci vous permettent de télécharger une image, un GIF ou une vidéo pour occuper tout l'écran, le plus souvent utilisé comme en-tête de votre page d'accueil.

Pour trouver des thèmes avec des fonctionnalités d'arrière-plan vidéo, recherchez "arrière-plan vidéo" sur les marchés populaires :

️ Assurez-vous de parcourir les listes de fonctionnalités, ou même de demander au développeur avant de télécharger/d'acheter, pour vous assurer qu'un thème dispose d'une fonctionnalité d'arrière-plan vidéo.

A titre d'exemple, le thème Colibri WP propose des arrière-plans vidéo.

Étape 1 : Installer et activer le thème

Pour activer un arrière-plan vidéo, installez le thème Colibri WP, puis allez dans Apparence > Paramètres Colibri > Démarrer . Ici, vous pouvez activer la fonctionnalité Colibri Page Builder.

Étape 2 : Ajouter un site de démonstration

Cliquez sur l'onglet Sites de démonstration et importez le modèle de démonstration de votre choix.

Étape 3 : Personnalisez l'image du héros

Accédez à Apparence > Personnaliser et sélectionnez l'icône d'engrenage Paramètres à côté du module Héros .

Étape 4 : Ajouter un arrière-plan vidéo

Sélectionnez l'onglet Style et basculez l' arrière -plan sur Vidéo .

Enfin, choisissez YouTube pour coller une URL de vidéo externe ou auto-hébergé pour télécharger une vidéo locale.

En conséquence, vous verrez l'arrière-plan vidéo en mouvement sur l'aperçu du Customizer.

Commencez avec l'arrière-plan vidéo parfait

Dans cet article, vous avez appris quatre méthodes différentes, dont au moins une devrait fonctionner pour votre situation.

️ Pour d'autres façons d'améliorer votre site, consultez notre article avec 10 éléments d'une conception de page d'accueil réussie.

Pour toute question sur les arrière-plans vidéo WordPress, partagez vos réflexions dans les commentaires ci-dessous.