Un arrière-plan vidéo peut ajouter une touche de professionnalisme à votre site Web. Les arrière-plans vidéo sont courants sur les sites Web d’entreprise, les portfolios et les galeries en ligne.

Si vous recherchez un nouveau design pour votre site Web, vous avez sans aucun doute vu des arrière-plans vidéo utilisés. Les développeurs de thèmes WordPress recherchent toujours des moyens de montrer leurs créations et utilisent fréquemment un arrière-plan vidéo pour montrer ce que leur conception peut faire.

Heureusement, vous n’avez pas besoin de dépenser de l’argent sur un nouveau thème WordPress pour ajouter un arrière-plan vidéo à votre site Web. En activant Beaver Builder, vous pouvez avoir un arrière-plan vidéo professionnel sur n'importe quelle page de votre site Web en quelques minutes. Si vous préférez, vous ne pouvez afficher un arrière-plan vidéo que sur certaines parties de votre page.

Dans ce didacticiel, j'aimerais vous montrer comment ajouter un arrière-plan vidéo à l'aide du plugin WordPress de création de pages visuelles Beaver Builder en trois étapes simples.

Étape 1 : Trouver une vidéo d'arrière-plan appropriée

L'ajout d'une vidéo d'arrière-plan à l'aide de Beaver Builder est incroyablement simple.

Vous constaterez que la partie la plus difficile de ce didacticiel consiste à choisir la vidéo à utiliser sur votre site Web, car il en existe des milliers.

Choisissez une vidéo qui vous aide à donner le ton que vous souhaitez donner. Par exemple, une vidéo d'un bureau occupé avec des personnes travaillant à l'extérieur aura fière allure sur un site Web d'entreprise, tandis qu'une vidéo sur la nature calme fonctionnera bien sur un site Web de santé.

Il existe un certain nombre d'endroits en ligne où vous pouvez trouver des vidéos gratuites et premium pour les arrière-plans.

Mon endroit préféré pour trouver des vidéos est Coverr. Toutes les vidéos ont un aspect professionnel et peuvent être téléchargées et utilisées gratuitement. Sept nouvelles vidéos sont ajoutées chaque semaine dans plusieurs catégories. Vous trouverez donc forcément une vidéo que vous aimez. Chaque vidéo peut être prévisualisée avant de télécharger le fichier zip.

Coverr propose une grande sélection d’arrière-plans vidéo et ils sont tous téléchargeables gratuitement.

D'autres bons sites Web pour vérifier les arrière-plans vidéo gratuits incluent (sans ordre particulier) :

• Mazwaï
• Vidéoezy
• Jeu vidéo
• Clipcanvas
• XStockvidéo
• Vidéos Pexels
• EnflammerMotion
• L'expérience Tanuri
• Rouleau B en bord de mer
• Vidéos d’archives gratuites
• Vidéos HD gratuites
• Distiller
• Club de séquences fantaisie
• Base de démarrage
• Séquences vidéo gratuites

Vous trouverez également des vidéos sur les services vidéo. Sur YouTube, vous trouverez des chaînes comme OrangeHD qui fournissent des arrière-plans vidéo. Il existe également d'excellentes vidéos sur Vimeo via des ressources telles que FreeHD et Life of Vids.

Vous trouverez également des images sur certains services sociaux. Découvrez les sous-reddits tels que Footage et Stockfootage sur Reddit. Flickr vaut également le détour, mais assurez-vous de sélectionner Creative Commons comme licence.

Des dizaines de milliers d’arrière-plans vidéo peuvent être trouvés sur VideoHive.

Les arrière-plans vidéo premium ne feront pas sauter la banque. Le prix sur VideoHive commence à partir de seulement 8 $ par vidéo. Il existe plus d'un quart de million de fichiers de séquences d'archives disponibles sur VideHive et plus de trente-six mille d'entre eux conviennent aux arrière-plans vidéo.

Les services d'images et de vidéos de stock tels que Shutterstock et VideoBlocks ont tendance à être un peu plus chers, sauf si vous vous abonnez sur une base mensuelle, mais si votre budget peut s'étendre un peu plus, vous y trouverez de nombreuses superbes vidéos.

Étape 2 : Préparez votre fichier vidéo

Une fois que vous avez sélectionné un fond vidéo, vous devez préparer votre fichier.

Votre fichier vidéo principal doit être enregistré au format MP4. Cela ne devrait pas poser de problème car c'est le format de fichier utilisé par la grande majorité des sites Web de vidéo, c'est-à-dire que le fichier que vous avez téléchargé sera déjà enregistré avec l'extension .mp4.

Vous devrez également télécharger votre vidéo au format vidéo WebM puisque les navigateurs Opera et Firefox l'utilisent.

WebM est un format vidéo libre de droits développé par Google (il a été initialement développé par On2 Technologies). Il est utilisé par Opera et Firefox à la place de la balise vidéo HTML5 <video>.

Vous trouverez de nombreux plugins et outils gratuits et commerciaux pour vous aider à convertir votre fichier vidéo au format vidéo WebM sur la page outils du site officiel du projet WebM.

La conversion d'un petit fichier vidéo ne devrait pas prendre longtemps.

Il existe également un excellent outil de conversion WebM en ligne disponible sur Online-Convert.

Vous pouvez télécharger votre fichier directement sur l'outil ou créer un lien vers une URL du fichier vidéo si vous avez déjà téléchargé la vidéo sur votre site Web. Les paramètres vidéo tels que la résolution, le débit binaire et le framerate peuvent être ajustés à l'aide de l'outil. Vous pouvez également faire pivoter et retourner la vidéo.

L'outil de conversion de fichiers d'Online-Convert est une excellente ressource.

La dernière chose que vous devez faire est de préparer une « photo de secours ». Cette photo d'arrière-plan sera affichée si, pour une raison quelconque, l'arrière-plan de la vidéo ne peut pas être affiché. Par exemple, si le visiteur utilise un navigateur obsolète qui ne dispose pas du bon codec vidéo.

Si vous souhaitez que la photo de secours corresponde à l'arrière-plan de votre vidéo, ouvrez la vidéo sur votre ordinateur et prenez une capture d'écran à l'aide de la touche « Impr écran » de votre clavier. Collez ensuite l'image dans un éditeur de photos et enregistrez le fichier. Vous pouvez également utiliser une photo unique dont l’apparence et la sensation sont similaires à celles de l’arrière-plan de votre vidéo.

J'ai noté dans la dernière section que ma ressource préférée pour les arrière-plans vidéo est Coverr.

L'une des raisons pour lesquelles j'aime Coverr est que le fichier zip téléchargé vous fournit tout ce dont vous avez besoin.

Chaque zip contient la vidéo aux formats vidéo MP4, OGV et WebM. Un instantané photo complet de la vidéo en résolution Full HD (1920 × 1080) est également fourni.

Par conséquent, lorsque vous téléchargez un arrière-plan vidéo depuis Coverr, vous n'aurez pas besoin d'utiliser un outil de conversion vidéo ou un éditeur de photos pour préparer votre fichier vidéo.

Étape 3 : attribuez votre vidéo à une page avec Beaver Builder

Maintenant que vous disposez de deux fichiers vidéo et d'une photo de secours, vous pouvez attribuer les fichiers à une page à l'aide de Beaver Builder.

Il existe deux manières de lancer Beaver Builder pour une page de votre site Web (qu'il s'agisse d'un article de blog, d'une page ou d'un autre type d'article).

La première option consiste à accéder à l’éditeur de la page en question. Une fois que vous êtes dans l'éditeur WordPress, cliquez simplement sur l'onglet « Page Builder » pour lancer Beaver Builder pour cette page.

Un exemple d'éditeur de page WordPress.

Alternativement, vous pouvez lancer Beaver Builder depuis le frontend de votre site Web.

Pour ce faire, vous devez être connecté à votre site Web afin que la barre d'administration s'affiche en haut de chaque page. Ensuite, recherchez simplement la page à laquelle vous souhaitez ajouter un arrière-plan vidéo et cliquez sur le lien « Page Builder » en haut de la page.

Vous pouvez charger Beaver Builder lorsque vous parcourez votre site Web.

Les deux exemples ci-dessus supposent que vous modifiez une publication ou une page existante sur votre site Web. Si vous souhaitez créer une page à partir de zéro, créez une nouvelle page sur votre site Web, puis chargez le modèle vierge à partir de la boîte de modèles Beaver Builder. Cela vous permet de commencer à créer votre page avec une toile vierge.

Cliquez sur le lien « Modèles » dans la barre d'outils Beaver Builder pour charger la boîte de sélection des modèles de mise en page.

Dans l'exemple ci-dessous, j'ajoute une vidéo d'arrière-plan à une page de contenu existante.

Avec Beaver Builder maintenant activé, survolez la zone à laquelle vous souhaitez ajouter un arrière-plan vidéo et vous verrez une liste d'icônes affichées en haut de la ligne.

Cliquez sur l'icône en forme de clé pour charger les paramètres de ligne.

Sélectionnez l’icône des paramètres de ligne.

Lorsque la boîte de paramètres de ligne est chargée, elle sera par défaut sur l'onglet de style.

Faites défiler jusqu'à la section intitulée Contexte. Vous verrez six options disponibles dans la liste déroulante : Aucune, Couleur, Photo, Vidéo, Diaporama et Parallaxe.

Sélectionnez Vidéo.

Sélectionnez la vidéo comme arrière-plan via la zone de paramètres de ligne.

Cela fait apparaître des options pour télécharger votre vidéo au format MP4 et WebM et pour télécharger votre photo de secours.

Trois champs différents sont affichés.

En cliquant sur « Sélectionner une vidéo » ou « Sélectionner une photo », vous chargez la bibliothèque multimédia WordPress. Vous pouvez télécharger chaque fichier ou les sélectionner dans votre bibliothèque multimédia si les fichiers ont déjà été téléchargés.

Téléchargez les fichiers vidéo et la photo de secours.

Une fois que vous avez téléchargé tous les fichiers, la zone de paramètres de ligne devrait ressembler à ceci.

Tous les fichiers ont maintenant été téléchargés.

À ce stade, vous pouvez enregistrer la zone de paramètres de ligne. Si vous le souhaitez, vous pouvez également enregistrer la zone de paramètres de ligne en tant que modèle et la rendre globale sur votre site Web.

Comme vous pouvez le voir ci-dessous, la vidéo s'affiche désormais en arrière-plan de mon texte.

À quoi ressemblait ma page une fois que j’ai défini l’arrière-plan de ma vidéo.

Si votre vidéo d'arrière-plan ne couvre pas toute la largeur de la zone de contenu (par exemple en raison du thème que vous utilisez), modifiez la largeur du contenu sur pleine largeur dans la zone des paramètres. Vous pouvez également ajuster la largeur de la page et la hauteur des lignes à partir de cette zone.

Si vous avez besoin de modifier davantage la mise en page, consultez l'onglet avancé car il vous permet de modifier le remplissage et les marges de votre ligne. Vous pouvez également définir l'apparence de la mise en page sur les appareils mobiles et appliquer des sélecteurs CSS à partir de cette zone.

Ajustez la largeur de votre page sur toute la largeur si nécessaire.

Dans l'exemple de mon arrière-plan vidéo que j'ai montré précédemment, vous avez peut-être remarqué que le texte de la page ne se détache pas sur l'arrière-plan vidéo.

Vous pouvez résoudre ce problème en ajustant les couleurs utilisées dans la ligne. La couleur du texte, la couleur du lien, la couleur du survol du lien et la couleur du titre peuvent toutes être modifiées.

Ajustez vos couleurs pour aider votre contenu à se démarquer.

Une superposition d'arrière-plan aidera votre vidéo à se démarquer ou à se fondre dans l'arrière-plan. Ceci est incroyablement utile car cela vous aidera à afficher votre vidéo exactement comme vous le souhaitez.

Une superposition d'arrière-plan est un moyen efficace de modifier l'apparence de votre vidéo.

Je vous encourage à jouer avec la couleur et l'opacité de la superposition jusqu'à ce que vous obteniez l'apparence souhaitée. Dans la capture d'écran ci-dessous, vous pouvez voir à quoi ressemblait l'arrière-plan de ma vidéo lorsque j'ai appliqué une couleur de superposition rouge avec une opacité de 50 %.

Assurez-vous de profiter de la fonctionnalité d'opacité de Beaver Builder.

Une bordure peut également être appliquée à votre ligne. Vous pouvez sélectionner une bordure pleine, en pointillés, en pointillés ou double. La couleur, l'opacité et la largeur de la bordure peuvent également être définies.

Des bordures peuvent être placées autour de votre zone de contenu.

Beaver Builder est une solution réactive qui fonctionne sur tous les navigateurs modernes, mais il est toujours judicieux de vérifier votre page sur différents navigateurs pour vous assurer qu'elle ressemble exactement à ce que vous souhaitez.

Les arrière-plans vidéo peuvent donner vie à vos pages.

Une fois que vous aurez compris comment ajouter des arrière-plans vidéo à l'aide de Beaver Builder, vous pourrez appliquer des arrière-plans vidéo aux pages en quelques minutes. Je recommande de télécharger une douzaine de vidéos dans un premier temps afin de pouvoir tester une variété de vidéos sur votre site Web et voir ce qui fonctionne et ce qui ne fonctionne pas.

Pensées finales

Je n'ai fait qu'effleurer la façon dont les arrière-plans vidéo peuvent être utilisés sur votre site Web.

Beaver Builder vous permet de créer une mise en page unique sur vos pages et de les remplir de dizaines de modules de contenu et de widgets WordPress. Dans l'exemple ci-dessus, j'ai montré comment une vidéo peut être appliquée comme arrière-plan derrière du texte, mais les arrière-plans vidéo peuvent être appliqués à n'importe quoi.

Par exemple, vous pouvez afficher une vidéo comme arrière-plan d'un curseur de contenu, d'une galerie, d'un tableau de prix, d'un carrousel de publications ou dans le cadre de votre page de destination. Il n’y a vraiment aucune limite à ce que vous pouvez faire.

J'espère que vous avez apprécié ce tutoriel et que vous l'avez trouvé utile. Si tel est le cas, je vous encourage à nous suivre sur Facebook, Slack et Twitter.

N'oubliez pas de consulter le blog Beaver Builder au cours des prochains mois, car nous avons prévu du contenu et des didacticiels fantastiques.

Bonne chance.
Kévin

À propos de Kevin Muldoon

Kevin Muldoon est un blogueur professionnel passionné de voyages. Il écrit régulièrement sur le marketing Internet sur son blog personnel et sur le forum de discussion sur le marketing Internet Rise Forums.