Comment ajouter une vidéo YouTube comme arrière-plan en plein écran dans WordPress

Nous essayons parfois d’ajouter de nouvelles façons de rendre nos sites WordPress plus attrayants et visuellement attrayants, et l’une d’entre elles est l’ajout d’une vidéo YouTube comme arrière-plan en plein écran.

Lorsqu’elles sont utilisées correctement, les vidéos d’arrière-plan peuvent augmenter de manière significative l’engagement des internautes et le temps passé sur une page. Nous trouvons également qu’elles constituent un excellent moyen d’attirer instantanément l’attention des internautes et de créer une première impression mémorable.

Dans cet article, nous allons vous montrer comment ajouter une vidéo YouTube comme fond d’écran sur votre site WordPress.

Pourquoi utiliser une vidéo YouTube comme arrière-plan du plein écran ?

Un arrière-plan vidéo engageant et accrocheur sur votre en-tête est un excellent moyen d’inciter les internautes à rester sur votre site. Lorsque les internautes atterrissent pour la première fois sur votre site WordPress, vous disposez uniquement de quelques secondes pour attirer leur attention.

De nos jours, de nombreux thèmes WordPress supportent les arrière-plans vidéo. Cependant, le téléversement et l’hébergement de contenus vidéo sur WordPress peuvent prendre beaucoup de bande passante.

En fonction de votre offre d’hébergement WordPress, vous devrez peut-être même acheter du stockage supplémentaire.

Chez WPBeginner, nous recommandons vivement de ne pas téléverser vos vidéos sur WordPress.

Au lieu de cela, vous pouvez utiliser un service comme YouTube, puis intégrer la vidéo en tant qu’arrière-plan de votre site WordPress. De cette façon, vous pouvez vous démarquer de vos concurrents sans ralentir votre site et affecter l’expérience de l’utilisateur.

Cela dit, voyons comment vous pouvez ajouter une vidéo YouTube comme arrière-plan en plein écran sur votre site WordPress. Nous allons vous afficher deux méthodes, et vous pouvez utiliser ces liens rapides pour naviguer entre elles :

Méthode 1 : Utiliser Advanced WordPress Backgrounds pour un arrière-plan vidéo en plein écran (gratuit)

Si vous cherchez un moyen gratuit et facile d’ajouter des arrière-plan vidéo, alors vous pouvez utiliser Advanced WordPress Backgrounds.

Cette extension gratuite ajoute un bloc Arrière-plan qui vous permet de créer un arrière-plan en plein écran en utilisant n’importe quelle couleur, image ou vidéo, y compris les vidéos YouTube.

Tout d’abord, vous devrez installer et activer l’extension dans votre Tableau de bord WordPress. Si vous avez besoin d’aide, veuillez consulter notre guide sur l ‘installation d’une extension WordPress.

Une fois activé, il suffit de se rendre sur la page ou la publication où vous souhaitez ajouter une vidéo YouTube comme arrière-plan en plein écran. Dans l’éditeur de blocs Gutenberg, allez-y et cliquez sur le bouton d’ajout de module  » + « .

Dans la fenêtre surgissante, commencez à taper « arrière-plan AWB ». Lorsque le bon bloc apparaît, cliquez dessus pour l’ajouter à la page.

Dans le menu de gauche, vous verrez trois onglets pour les différents types d’arrière-plan pleine largeur que vous pouvez créer : Couleur, Image et Vidéo.

Si vous souhaitez ajouter une vidéo YouTube, cliquez sur l’onglet « Vidéo ». Choisissez ensuite l’onglet« YouTube / Vimeo« .

Vous pouvez maintenant copier et coller l’URL du fichier vidéo YouTube que vous souhaitez utiliser sur votre blog WordPress.

À présent, l’éditeur de blocs de WordPress affiche une Prévisualisation de l’aspect de cet arrière-plan.

Advanced WordPress Backgrounds modifie la taille de la vidéo en fonction du contenu que vous ajoutez au-dessus, donc ne vous inquiétez pas si la vidéo semble actuellement un peu petite.

Par défaut, l’arrière-plan vidéo est désactivé sur les appareils mobiles.

Toutefois, si vous souhaitez afficher l’arrière-plan de la vidéo sur les appareils mobiles, cliquez sur la case à cocher « Activer sur les appareils mobiles » pour l’activer.

D’emblée, le bloc lira l’intégralité de la vidéo YouTube en lecture automatique et en boucle.

Une autre option consiste à lire une partie spécifique de la vidéo en saisissant les heures exactes dans les champs « Heure de début » et « Heure de fin ».

Vous pouvez également empêcher la vidéo d’être lue en boucle en désactivant le permutateur « Boucle ».

Par défaut, la vidéo est lue uniquement lorsque l’internaute peut la voir dans son navigateur. Cela aide à maintenir les performances de votre site, c’est pourquoi il est préférable de ne pas activer le permutateur « Toujours en cours de lecture ».

Lorsque vous ajoutez la vidéo pour la première fois, elle est affichée avec une opacité de 100 %, de sorte qu’elle semble solide. N’hésitez pas à faire glisser le Diaporama « Opacité de l’image » pour rendre l’arrière-plan de la vidéo YouTube plus subtil.

Si vous expérimentez l’opacité, vous pouvez également essayer d’ajouter une superposition colorée.

Il suffit de cliquer pour déplier la section « Couleur de la superposition », puis d’utiliser les réglages pour créer des superpositions de différentes couleurs.

N’hésitez pas à explorer d’autres réglages, comme l’effet de parallaxe et l’espacement, pour que l’arrière-plan ressemble exactement à ce que vous souhaitez.

Lorsque vous êtes satisfait de la façon dont l’arrière-plan de la vidéo YouTube est configuré, il est temps de commencer à ajouter du contenu comme des liens, des textes et des images.

Pour commencer, cliquez sur l’icône « + » au milieu du bloc Arrière-plan (AWB).

Cela ouvre une fenêtre surgissante dans laquelle vous pouvez choisir le bloc que vous souhaitez ajouter. L’extension Advanced WordPress Backgrounds fonctionne avec tous les blocs WordPress standard, de sorte que vous pouvez ajouter tout le contenu que vous souhaitez.

Si vous ajoutez du texte au-dessus du module, veillez à modifier la couleur du texte pour qu’elle s’harmonise avec l’arrière-plan de la vidéo.

Lorsque vous êtes satisfait de l’aspect de la page, cliquez sur le bouton « Mettre à jour » ou « Publier » pour la rendre directe. Maintenant, si vous visitez votre site WordPress, vous verrez l’arrière-plan vidéo en action.

Méthode 2 : Utiliser Thrive Architect pour ajouter un arrière-plan vidéo en plein écran (recommandé)

Si vous souhaitez personnaliser entièrement votre vidéo d’arrière-plan en plein écran ou même concevoir facilement toutes les pages de votre site, cette méthode est faite pour vous.

La meilleure façon d’ajouter une vidéo YouTube en tant qu’arrière-plan en plein écran est d’utiliser Thrive Architect.

Thrive Architect est une extension de constructeur de page facile à utiliser, conçue pour les débutants à l’esprit. En plus d’une fonctionnalité d’arrière-plan vidéo, il dispose d’une fonctionnalité de glisser-déposer qui est flexible à utiliser, de sorte que vous pouvez créer le site que vous voulez sans aucun tracas.

En outre, il est livré avec des modèles de page d’atterrissage intelligents qui sont optimisés pour les conversions, de sorte que votre page d’atterrissage est configurée pour le succès dès le départ.

En savoir plus sur Thrive Architect, vous pouvez lire notre Avis sur Thrive Architect.

Si vous souhaitez utiliser cette méthode, allez-y et achetez d’abord une offre Thrive Architect. Il est disponible à l’achat en tant que produit autonome ou dans le cadre du lot de thèmes natifs Thrive.

Ensuite, il suffit d’installer l’extension. Vous pouvez consulter notre guide sur l ‘installation d’une extension WordPress pour en savoir plus.

Après cela, vous pouvez aller dans  » Pages  » depuis la zone d’administration de WordPress et sélectionner une page à modifier. Survolez la page et choisissez  » Modifier avec Thrive Architect « .

Cliquez ensuite sur le bouton « + » à droite de la page et trouvez l’élément Section arrière-plan.

Il suffit de cliquer dessus pour l’ajouter à la page.

À ce stade, vous pouvez naviguer vers le côté gauche de la page et défiler vers le bas jusqu’à la section Style d’arrière-plan.

Il suffit d’activer le permuter « Arrière-plan vidéo » et de sélectionner « YouTube » comme source.

Ensuite, accédez à la vidéo YouTube que vous souhaitez utiliser comme arrière-plan en plein écran.

Il suffit de copier l’URL de la vidéo YouTube comme suit :

Ensuite, collez l’URL dans la section appropriée.

L’arrière-plan doit maintenant apparaître à l’écran.

L’arrière-plan est ajouté, mais il n’est pas encore en plein écran.

Pour vous assurer qu’il s’agit bien d’un plein écran, vous devez défiler jusqu’à la section Options principales. Activez ensuite les options « Le contenu couvre toute la largeur de l’écran », « Adapter la hauteur à l’écran » et « Adapter à la largeur de l’écran ».

Explorons d’autres options. Pour ajouter du contenu à votre arrière-plan, il vous suffit de cliquer à nouveau sur le bouton « + » sur le côté droit et de faire glisser un élément.

Vous pouvez ajouter des textes, des images, des formulaires, des boutons, des témoignages, et plus encore. Thrive Architect possède des dizaines d’éléments axés sur la conversion que vous pouvez exploiter pour votre site.

Si vous estimez que la couleur d’arrière-plan ne contraste pas suffisamment avec le texte, il vous suffit de revenir aux réglages de la section Arrière-plan.

Ensuite, défilez à nouveau jusqu’à Style d’arrière-plan et, dans la faculté d’ajouter un calque, choisissez une couleur unie. Ensuite, vous pouvez choisir une couleur à utiliser comme filtre d’arrière-plan et ajuster l’opacité comme vous le souhaitez.

Une fois que vous avez terminé, cliquez sur « Appliquer ».

Un autre élément que vous pouvez définir dans les Réglages de la section arrière-plan est le comportement du défilement. Vous pouvez choisir de le rendre statique, épinglé ou parallaxe.

Nous vous recommandons de la garder statique afin que l’arrière-plan ne bouge pas lorsque les utilisateurs/utilisatrices défilent vers le bas. Dans le cas contraire, la vidéo continuera à être lue, ce qui risque de ralentir votre site.

La prochaine chose que vous pouvez faire est d’aller dans la section Responsive. Ici, vous pouvez choisir de faire apparaître l’arrière-plan vidéo sur les versions mobile et tablette de votre site.

C’est à vous de choisir, mais gardez à l’esprit que les vidéos mettent du temps à se charger. Il peut être ennuyeux pour vos internautes d’attendre qu’elles s’exécutent lorsqu’ils sont sur un appareil à petit écran.

Lorsque vous êtes satisfait de l’arrière-plan de la vidéo YouTube en plein écran, il vous suffit de cliquer sur le bouton « Enregistrer le travail » pour enregistrer vos modifications.

C’est tout !

Allez maintenant sur votre site WordPress pour voir ce que cela donne en direct.

Voici à quoi ressemble notre page web de test.

Alternative : Ajouter un arrière-plan animé dans WordPress

Si les arrière-plan vidéo peuvent être visuellement attrayants, ils peuvent également ralentir la vitesse de chargement de votre site. Si vous souhaitez une option facultative, vous pouvez ajouter un arrière-plan animé.

Le meilleur moyen d’y parvenir est d’utiliser SeedProd, une puissante extension de constructeur de page par glisser-déposer pour WordPress.

Il vous permet d’ajouter facilement de superbes arrière-plan animés à votre site en utilisant particle.js. Particle.js est une bibliothèque JavaScript légère qui crée des animations interactives de particules.

En savoir plus, vous pouvez consulter notre guide sur l’ajout d’un arrière-plan animé dans WordPress.

Astuce bonus : Ajouter un flux vidéo YouTube dans WordPress

Voulez-vous ajouter plus de vidéos à votre site ? Bien que WordPress dispose de blocs d’intégration vidéo intégrés, ils ne sont pas la façon la plus visuellement attrayante d’afficher des vidéos, surtout si vous en avez plusieurs.

C’est là qu’intervient Smash Balloon YouTube Feed Pro.

Smash Balloon YouTube Feed Pro est la meilleure extension de galerie YouTube du marché. Il affiche automatiquement toutes les dernières vidéos de votre chaîne YouTube, de sorte que vos internautes verront toujours le contenu le plus récent.

Il suffit de créer un flux YouTube à l’aide de l’éditeur/éditrices de Smash Balloon, puis de l’ajouter à n’importe quelle page ou publication à l’aide d’un code court ou du bloc prêt à l’emploi de l’extension.

Vous pouvez également utiliser Smash Balloon pour intégrer des playlists, des favoris et des diffusions directes de YouTube sur votre site WordPress.

La meilleure chose à propos de Smash Balloon est qu’il ne ralentit pas votre site. La fonctionnalité de mise en cache intégrée à YouTube du plugin s’assurera que votre site se charge toujours rapidement, ce qui est excellent pour le référencement.

Pour plus de détails, vous pouvez consulter notre guide étape par étape sur la façon d’afficher les dernières vidéos d’une chaîne YouTube dans WordPress.

Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter une vidéo YouTube comme arrière-plan dans WordPress. Vous pouvez également consulter notre guide sur la façon de créer une page atterrissage virale de liste d’attente avec WordPress et nos choix d’experts pour les meilleurs constructeurs de thèmes WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.