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

Les arrière-plans vidéo plein écran captent instantanément l'attention. Ils transforment un simple site WordPress en quelque chose de poli, moderne et conçu de manière professionnelle.

Dans l'ensemble, nous avons constaté à quel point un arrière-plan vidéo bien placé peut améliorer les premières impressions et maintenir l'engagement des visiteurs.

La bonne nouvelle est que vous n'avez pas besoin de logiciel spécial ou de développement personnalisé. Vous pouvez même utiliser des vidéos YouTube que vous possédez déjà, ce qui en fait un moyen abordable d'ajouter du mouvement et de la personnalité à vos pages.

Dans ce guide, nous vous présenterons les moyens les plus simples d'ajouter une vidéo YouTube comme arrière-plan de votre WordPress à l'aide d'outils adaptés aux débutants.

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

Utiliser une vidéo YouTube comme arrière-plan plein écran est un moyen puissant d'attirer immédiatement l'attention des visiteurs et de les maintenir engagés sur votre site.

Voici les avantages :

• Maintenez des temps de chargement de page rapides : intégrer une vidéo YouTube plutôt que d'uploader votre propre vidéo maintient votre site léger, ce qui est important pour l'expérience utilisateur et le SEO.
• Engagez les visiteurs instantanément : un arrière-plan vidéo animé peut capter l'attention dans les premières secondes d'une visite.
• Démarquez-vous de la concurrence : cela crée un aspect visuellement attrayant et moderne qui distingue votre site.
• Économisez de la bande passante et du stockage : héberger des vidéos sur WordPress peut consommer beaucoup de ressources serveur et nécessiter un stockage supplémentaire.

Chez WPBeginner, nous recommandons vivement d'intégrer des vidéos de YouTube plutôt que de les uploader directement sur WordPress. Cette approche vous permet de présenter du contenu engageant sans ralentir votre site ni imposer une contrainte inutile à votre plan d'hébergement.

Cela dit, voyons comment ajouter une vidéo YouTube en arrière-plan plein écran sur votre site WordPress. Nous vous montrerons 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 plein écran (Gratuit)
• Méthode 2 : Utiliser Thrive Architect pour ajouter un arrière-plan vidéo plein écran (Recommandé)
• Alternative : Ajoutez un arrière-plan animé dans WordPress avec SeedProd
• Foire aux questions sur les arrière-plans vidéo

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

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

Ce plugin gratuit ajoute un bloc d'arrière-plan qui vous permet de créer un arrière-plan 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 le plugin dans votre tableau de bord WordPress. Si vous avez besoin d'aide, veuillez consulter notre guide sur comment installer un plugin WordPress.

Après l'activation, rendez-vous simplement sur la page ou l'article où vous souhaitez ajouter une vidéo YouTube en arrière-plan plein écran. Dans l'éditeur de blocs Gutenberg, cliquez sur le bouton ‘+’ pour ajouter un bloc.

Dans la fenêtre contextuelle qui apparaît, commencez à taper ‘Background 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-plans pleine largeur que vous pouvez créer : Couleur, Image et Vidéo.

Puisque vous souhaitez ajouter une vidéo YouTube, cliquez sur l'onglet « Vidéo ». Ensuite, choisissez 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.

Maintenant, l'éditeur de blocs WordPress affichera un aperçu de l'apparence de cet arrière-plan.

Advanced WordPress Backgrounds modifie la taille de la vidéo en fonction du contenu que vous ajoutez par-dessus, alors 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.

Cependant, si vous souhaitez afficher l'arrière-plan vidéo sur les appareils mobiles, cliquez pour activer le bouton bascule « Activer sur les appareils mobiles ».

Gardez simplement à l'esprit que les arrière-plans vidéo peuvent drainer la batterie et consommer des données pour les utilisateurs mobiles.

Par défaut, le bloc lira l'intégralité de la vidéo YouTube en lecture automatique et en boucle. 

Une autre option consiste à lire une portion spécifique de la vidéo en saisissant les heures exactes (en secondes) dans les champs 'Heure de début' et 'Heure de fin'.

Vous pouvez également arrêter la lecture en boucle de la vidéo en désactivant le bouton bascule « Boucle ».

Par défaut, la vidéo ne sera lue que lorsque le visiteur pourra la voir dans son navigateur. Cela aidera à maintenir les performances de votre site Web, vous voudrez donc généralement laisser le bouton bascule « Toujours lire » désactivé.

Lorsque vous ajoutez la vidéo pour la première fois, elle est affichée à 100 % d'opacité, elle est donc entièrement visible. N'hésitez pas à faire glisser le curseur « Opacité de l'image » pour rendre l'arrière-plan de la vidéo YouTube plus subtil.  

Si vous expérimentez avec l'opacité, vous voudrez peut-être aussi essayer d'ajouter une superposition de couleur. 

Cliquez simplement pour développer la section « Couleur de la superposition », puis utilisez les paramètres pour créer différentes superpositions de couleurs.

N'hésitez pas à explorer d'autres paramètres, comme l'effet de parallaxe et l'espacement, pour que l'arrière-plan ressemble exactement à ce que vous voulez.

Lorsque vous êtes satisfait de la configuration de l'arrière-plan vidéo YouTube, 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 contextuelle où vous pouvez choisir le bloc que vous souhaitez ajouter. Le plugin Advanced WordPress Backgrounds fonctionne avec tous les blocs WordPress standard, vous pouvez donc ajouter le contenu de votre choix.

Si vous ajoutez du texte par-dessus le bloc, assurez-vous simplement de changer la couleur du texte pour qu'elle complète bien l'arrière-plan de la vidéo.

Lorsque vous êtes satisfait du résultat, cliquez simplement sur le bouton « Mettre à jour » ou « Publier » pour rendre la page en ligne. 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 plein écran (Recommandé)

Si vous souhaitez personnaliser entièrement votre arrière-plan vidéo ou concevoir facilement des pages complètes, cette méthode est faite pour vous.

Pour cela, vous aurez besoin de Thrive Architect.

Après des tests approfondis, nous avons constaté que c'est un plugin de création de pages super convivial. Outre une fonctionnalité d'arrière-plan vidéo, il dispose d'une fonctionnalité de glisser-déposer flexible à utiliser, vous permettant de créer le site Web que vous souhaitez sans tracas.

De plus, il est livré avec des modèles de pages de destination intelligents optimisés pour les conversions, de sorte que votre page de destination est prête pour le succès dès le départ.

Pour plus d'informations sur Thrive Architect, vous pouvez lire notre avis sur Thrive Architect.

Si vous souhaitez utiliser cette méthode, achetez d'abord un plan Thrive Architect. Il est disponible à l'achat en tant que produit autonome ou dans le cadre du bundle Thrive Themes.

Ensuite, installez simplement le plugin. Vous pouvez consulter notre guide sur comment installer un plugin WordPress pour plus d'informations.

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 ».

Ensuite, cliquez sur le bouton « + » sur le côté droit de la page et trouvez l'élément Section d'arrière-plan.

Cliquez simplement dessus pour l'ajouter à la page.

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

Ici, activez simplement le bouton bascule « Arrière-plan vidéo » et sélectionnez « YouTube » pour la Source.

Après cela, allez à la vidéo YouTube que vous souhaitez utiliser comme arrière-plan plein écran.

Copiez simplement l'URL de la vidéo YouTube comme ceci :

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

Vous devriez maintenant voir l'arrière-plan à l'écran.

Bien que l'arrière-plan soit ajouté, il n'est pas encore en plein écran.

Pour vous assurer qu'il est en plein écran, vous devez faire défiler jusqu'à la section Options principales. Ensuite, activez les options « Le contenu couvre toute la largeur de l'écran », « Adapter la hauteur à l'écran » et « Étirer pour adapter la largeur de l'écran ».

Explorons quelques options supplémentaires. 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 et déposer un élément.

Vous pouvez ajouter des textes, des images, des formulaires, des boutons, des témoignages, et plus encore. Thrive Architect propose des dizaines d'éléments axés sur la conversion que vous pouvez utiliser pour votre site Web.

Si vous pensez que la couleur d'arrière-plan ne contraste pas suffisamment avec le texte, retournez simplement aux paramètres de la section Arrière-plan.

Ensuite, faites défiler à nouveau vers Style d'arrière-plan, et dans l'option Ajouter une couche, choisissez une couleur unie. Après cela, vous pouvez choisir une couleur à utiliser comme filtre d'arrière-plan et ajuster l'opacité à votre guise.

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

Une autre chose que vous pouvez ajuster dans les paramètres de la section Arrière-plan est le Comportement de défilement. Vous pouvez choisir de le rendre statique, fixe ou parallaxe.

Nous vous recommandons de le laisser statique afin que l'arrière-plan ne bouge pas lorsque l'utilisateur fait défiler vers le bas. Sinon, la vidéo continuera de jouer, ce qui peut ralentir votre site web.

La prochaine chose que vous pouvez faire est d'aller dans la section Responsive. Ici, vous pouvez choisir si vous voulez que l'arrière-plan vidéo apparaisse sur les versions mobiles et tablettes de votre site web.

C'est à vous de décider, mais n'oubliez pas que les vidéos prennent du temps à charger. Cela peut devenir ennuyeux pour vos visiteurs d'attendre qu'elles se lancent lorsqu'ils sont sur un appareil à petit écran.

Une fois que vous êtes satisfait de l'arrière-plan vidéo YouTube plein écran, cliquez simplement sur le bouton « Enregistrer le travail » pour sauvegarder vos modifications.

C’est tout !

Maintenant, allez sur votre site web WordPress pour voir à quoi il ressemble en direct.

Voici à quoi ressemble notre page web de test.

Alternative : Ajoutez un arrière-plan animé dans WordPress avec SeedProd

Bien que les arrière-plans vidéo puissent être visuellement attrayants, ils peuvent également ralentir la vitesse de chargement de votre site Web. Si vous souhaitez une alternative, vous pouvez ajouter un arrière-plan animé à la place.

La meilleure façon de faire cela est avec SeedProd, un puissant plugin de création de pages par glisser-déposer pour WordPress.

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

Pour plus d'informations, vous pouvez consulter notre guide sur comment ajouter un arrière-plan animé dans WordPress.

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

Voulez-vous ajouter plus de vidéos à votre site Web ? Bien que WordPress dispose de blocs d'intégration vidéo intégrés, ce n'est pas la manière la plus attrayante d'afficher des vidéos, surtout si vous en avez plusieurs.

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

Selon nous, c'est le meilleur plugin de galerie YouTube du marché qui affiche automatiquement toutes les dernières vidéos de votre chaîne YouTube, afin que vos visiteurs voient toujours le contenu le plus récent.

Créez simplement un flux YouTube à l'aide de l'éditeur facile de Smash Balloon, puis ajoutez-le à n'importe quelle page ou publication à l'aide d'un shortcode ou du bloc prêt à l'emploi du plugin.

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

Le meilleur atout de Smash Balloon est qu'il ne ralentit pas votre site. La fonction de mise en cache YouTube intégrée du plugin garantira que votre site se charge toujours rapidement, ce qui est idéal pour le SEO.

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

Foire aux questions sur les arrière-plans vidéo

Voici quelques questions fréquemment posées par nos lecteurs concernant l'ajout d'arrière-plans vidéo dans WordPress :

Comment mettre une vidéo YouTube en plein écran ?

Pour mettre une vidéo YouTube en plein écran, cliquez sur l'icône plein écran en bas à droite du lecteur YouTube, ou utilisez le raccourci clavier f lorsque la vidéo est active.

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

Vous pouvez ajouter un arrière-plan vidéo via un plugin ou un constructeur de pages comme Thrive Architect. Pour les vidéos YouTube, l'intégration est recommandée pour éviter de ralentir votre site.

Quel type de vidéos YouTube devrais-je choisir comme arrière-plan ?

Nous vous recommandons de choisir une vidéo visuellement attrayante, suffisamment subtile pour ne pas distraire de votre contenu principal. Les clips courts en boucle avec un mouvement doux fonctionnent souvent le mieux.

Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter une vidéo YouTube comme arrière-plan dans WordPress. Vous voudrez peut-être également consulter notre guide sur comment créer une page de destination virale avec liste d'attente avec WordPress et nos meilleurs choix pour les meilleurs constructeurs de thèmes WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.