Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Note éditoriale : Nous percevons une commission sur les liens des partenaires sur WPBeginner. Les commissions n'affectent pas les opinions ou les évaluations de nos rédacteurs. En savoir plus sur Processus éditorial.

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

Lorsqu’elles sont utilisées correctement, les vidéos d’arrière-plan peuvent instantanément attirer l’attention d’un internaute et le garder sur votre site. Cela fait des vidéos un excellent choix pour les pages d’atterrissage et les pages de vente.

Dans cet article, nous allons vous afficher comment ajouter une vidéo YouTube comme arrière-plan en plein écran sur votre site WordPress.

How to add YouTube video as fullscreen background in 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.

How to add a fullscreen video to a WordPress blog post or 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.

Getting the URL for a YouTube video

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

How to customize a YouTube background video in WordPress

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.

Showing a YouTube background on mobile devices

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

How to add a YouTube background video to a website

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.

Changing the opacity settings for a YouTube video

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.

Adding an overlay to a video background

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

Adding blocks to a YouTube background video

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.

An example of a YouTube video background in WordPress

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.

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

Clicking Edit with Thrive Architect on a page

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.

Adding a Background section in Thrive Architect

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

Selecting a video background style in Thrive Architect

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 :

Getting the URL for a YouTube video

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

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

Pasting video background URL in Thrive Architect

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

Adjusting the video background height and width in Thrive Architect

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

Changing the color overlay opacity in Thrive Architect

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.

Adjusting the scroll behavior of the video background in Thrive Architect

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.

Adjusting the responsiveness behavior of the video background in Thrive Architect

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.

Video background example made with Thrive Architect

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.

The particle background's advanced settings in SeedProd

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.

Embedding a YouTube playlist using Smash Balloon

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.

Creating a YouTube feed using the Smash Balloon social media plugin

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.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

14 commentairesLaisser une réponse

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Moinuddin Waheed says

    This is very simple yet powerful idea to grab the visitors attention by playing something in the background.
    I have used it with page builders and never knew that simple method directly from Gutenberg is also available to use.
    it is specially helpful for landing and sales pages which makes intuitive on visitors part to engage with call to action button.
    Thank for illustrating the simple steps.

  3. THANKGOD JONATHAN says

    I have an uploaded video on my WordPress library and I have been thinking of making it like a background video on my blog.
    Please how do I do it properler so that it does not affect my website speed? Or must I upload it on youtube and then embed it on my site?

  4. Ralph says

    I want to use it as a background for my portfolio/business contact page, but does it slow down the website itself, or does it load it straight from YouTube and doesn’t slow down the website itself?

    Previous comments are old but still concerning.

    • WPBeginner Support says

      The videos should load as an embed from YouTube which shouldn’t cause a slowdown on your site.

      Administrateur

    • Jiří Vaněk says

      I shouldn’t worry about the slowdown of the website itself. The issue here lies mainly in slow connectivity and data on these devices. The first problem arises with mobiles that don’t have strong connectivity. It will lag, appear unprofessional, and perhaps lead the user to leave. The second issue is that if someone has a limited data plan, they’ll complain about how much data such a page consumes. Personally, I’d probably avoid this.

  5. Jiří Vaněk says

    I can learn something new again with Gutenberg. I’ve always known how to do this only in Elementor, where adding a video background is really simple. Now I know how to do it outside of Elementor as well.

  6. T_Lind says

    Great article!

    But I cannot add the video background to a single page, like you describe. I’m only able to add a youtube video to my homepage, which limits the extend to which the app can be used.

    Ideas?

  7. Tobi says

    Hi, this plugin was a disaster to my website.

    It consumed all the resources and for hours I was on the phone with my hosting company trying to battle why I was getting the errors on this screenshots below:

    After hours, we finally traced them to the plugin i recently installed.

    We had to remove it from the file manager and everything is back to normal now.

    It takes up a lot of resources unless you have a super hosting account, i don’t advise.

    • WPBeginner Support says

      Hi Tobi,

      The plugin shouldn’t consume too many resources because it loads video from YouTube not from your website. The first screenshot you shared points to a database connection error. We hope everything works fine for you now, however, if you still see issues on your website then it is most likely a hosting issue.

      Administrateur

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.