Vidéo d'arrière-plan WordPress : Ajoutez-la de 2 manières différentes

Publié: 2023-07-25

Vous cherchez à rendre votre site WordPress plus excitant et captivant ? Une excellente façon de le faire est d'ajouter une vidéo d'arrière-plan. C'est une fonctionnalité intéressante qui attire instantanément l'attention des gens et rend votre site plus attrayant. Mais comment ajouter un fond vidéo dans WordPress ?

Si vous demandez les étapes simples pour ajouter une vidéo d'arrière-plan WordPress, alors-

  • Créer une publication/modifier une publication existante
  • Ajouter un bloc de couverture
  • Ajoutez maintenant la vidéo en la téléchargeant ou depuis la médiathèque
  • Enfin, personnalisez-le

Cela semble simple, mais il y a du travail supplémentaire. Ne t'inquiète pas; dans cet article, nous avons tout expliqué correctement. Eh bien, ce n'est pas seulement le chemin; nous avons ajouté une autre façon d'ajouter une vidéo en tant qu'arrière-plan de site Web à l'aide de PostX.

Alors, explorons comment ajouter un arrière-plan vidéo dans WordPress.

Vidéo d'arrière-plan WordPress : comment ajouter avec l'éditeur de blocs par défaut

Donc, nous voici dans le segment principal. Vous n'aimerez peut-être pas les tracas supplémentaires tels que l'ajout d'un plugin pour insérer une vidéo en tant qu'arrière-plan WordPress. Alors, commençons par l'éditeur Gutenberg ou Block par défaut. Ci-dessous, nous ajoutons un guide étape par étape sur la façon de le faire.

Étape 1 : Connectez-vous et créez une publication/page

Ici, la toute première étape est si basique. Connectez-vous à votre tableau de bord WordPress, puis placez le curseur sur le bouton "+ Nouveau". Ensuite, selon votre préférence, ajoutez une publication ou une page.

add new page
ajouter une nouvelle page

Étape 2 : Ajouter le bloc de couverture

Cliquez maintenant sur le bouton "+" pour ajouter un nouveau bloc. Ensuite, dans la zone de recherche, tapez "couverture" et vous verrez l'icône du bloc de couverture. Cela ressemblera à l'image suivante.

add cover block
ajouter un bloc de couverture

Étape 3 : Ajouter la vidéo

Après avoir cliqué sur le bouton de couverture, le bloc apparaîtra avec quelques options. Là, vous aurez deux options pour ajouter une vidéo d'arrière-plan. Vous pouvez soit télécharger une vidéo depuis votre ordinateur en cliquant sur le bouton « Télécharger », soit sélectionner une vidéo dans votre « Médiathèque ».

upload video
Télécharger une video

Alors maintenant, cliquez sur l'un d'eux et choisissez la vidéo que vous souhaitez utiliser comme vidéo d'arrière-plan WordPress.

select video to upload
sélectionner la vidéo à télécharger

Étape 4 : Personnalisez tout

La tâche que vous recherchez - l'ajout d'un arrière-plan vidéo WordPress est maintenant terminée. Mais maintenant, il est temps de tout personnaliser. Il existe de nombreuses options de personnalisation. Ci-dessous, nous discuterons de certaines personnalisations courantes.

Ajouter une légende pour le bloc

Ce que la plupart des gens font, c'est ajouter une légende sur la vidéo. Ici, vous n'aurez rien à faire de spécial. C'est parce que, par défaut, vous remarquerez « Écrire le titre… ». Cliquez simplement ici et vous verrez le curseur d'écriture.

add text
ajouter une légende

Maintenant, vous pouvez facilement ajouter n'importe quel titre/citation ou tout ce que vous souhaitez afficher sur la vidéo d'arrière-plan. Vous trouverez même quelques options de personnalisation supplémentaires, telles que :

  • Paragraphe/Titre
  • Couleur du texte
  • Taille du texte
  • Sélecteur de point focal

C'est ça. Vous avez terminé d'intégrer une vidéo de fond sur WordPress.

Ajouter du style à la vidéo

Eh bien, seule une légende n'est pas tout. Vous pouvez également modifier le style de la vidéo d'arrière-plan. Pour cela, cliquez sur le bouton de style (le bouton ressemble à un cercle à moitié noir et blanc), et vous trouverez plus d'options pour personnaliser la vidéo. Les options incluent

style the video
styliser la vidéo
  • Couleur (solide et dégradé)
  • Opacité de superposition
  • Typographie
  • Hauteur minimale de couverture

Incorporez maintenant le style en fonction de vos préférences personnelles. Nous venons d'ajouter des textes de différentes tailles et couleurs et de les aligner en conséquence. Voici la sortie finale de la vidéo d'arrière-plan WordPress de Gutenberg.

final output of video background

Vidéo d'arrière-plan WordPress : comment ajouter avec PostX

La méthode ci-dessus était la méthode par défaut. Cependant, si vous aimez le personnaliser davantage et souhaitez un look plus professionnel, nous vous suggérons d'utiliser notre plugin PostX. PostX offre plus de contrôle sur vos vidéos d'arrière-plan WordPress et vous permet de les ajouter facilement avec diverses options de personnalisation. Avec PostX, vous pouvez également afficher des vidéos sous forme d'images en vedette. Voici comment vous pouvez utiliser PostX pour ajouter une vidéo d'arrière-plan à votre site WordPress :

Étape 1 : Installer et activer la publication

Tout d'abord, vous devez installer et activer le plugin PostX sur votre site WordPress. Pour ce faire, cliquez sur le curseur sur la section "Plugins" de votre tableau de bord WordPress, puis cliquez sur "Ajouter un nouveau".

Installing PostX
Installer PostX

Après cela, recherchez "PostX". Une fois que vous avez trouvé le plugin, cliquez sur "Installer maintenant" puis sur "Activer".

Obtenez PostX Pro pour déverrouiller toutes les fonctionnalités intéressantes et créer des sites Web incroyables

Étape 2 : Créez un nouveau message ou modifiez-en un existant

Après avoir activé PostX, vous pouvez créer une nouvelle publication ou en modifier une existante à laquelle vous souhaitez ajouter la vidéo d'arrière-plan. Vous pouvez également utiliser le plugin sur des pages ou tout autre type de publication personnalisé. Alors, créez maintenant un nouveau message comme je l'ai expliqué précédemment.

add new page
ajouter une nouvelle page

Étape 3 : Ajouter le bloc Ligne/Colonne

Maintenant, tout comme le précédent, cliquez sur le bouton "+" pour ajouter un nouveau bloc. Ensuite, dans la zone de recherche, tapez "Row" et vous trouverez l'icône de bloc PostX Row/Column.

add row column block
ajouter un bloc de colonne de ligne

NB : Vous pouvez voir 2 blocs différents nommés Row. Ne soyez pas confus; l'un provient de l'éditeur par défaut et l'autre de PostX. Suivez simplement l'image ci-dessus et sélectionnez le bloc de ligne/colonne suggéré.

Étape 4 : Choisissez la mise en page

Après avoir cliqué sur le bloc de lignes, vous verrez dix mises en page différentes telles que "100", "50:50", "50:25:25", etc. Choisissez-en une en fonction de vos besoins.

choose layout
choisir la mise en page

Allons-y avec la mise en page 100:00 : cliquez dessus.

Étape 5 : Cliquez sur Arrière-plan et Wrapper

Après avoir opté pour la mise en page, vous remarquerez que le bloc de lignes est créé avec un seul bloc à l'intérieur.

Vous n'avez plus de travail avec le bloc inclus. Au lieu de cela, votre tâche principale est maintenant avec le bloc Row. Cliquez maintenant sur le bouton "Bloquer" (vous le trouverez juste en dessous du bouton de publication.)

background and wrapper setting
arrière-plan et réglage de l'emballage

Ensuite, vous verrez de nombreuses options pour personnaliser la ligne. Cependant, notre tâche principale consiste à ajouter une vidéo d'arrière-plan WordPress. Trouvez donc l'option "Arrière-plan et wrapper" à l'intérieur du "Bloquer le bouton", puis cliquez dessus. Si vous ne le trouvez pas, vérifiez simplement l'image ci-dessous.

Étape 6 : Téléchargez l'URL de la vidéo

Cliquez maintenant sur le bouton et vous trouverez 4 options sous l'option d'arrière-plan - Solide, Dégradé, Image et Vidéo. Là, sélectionnez "Vidéo".

click on video option
cliquez sur l'option vidéo

Remarque : Lorsque vous utilisez PostX, vous ne pouvez pas télécharger directement une vidéo. Vous devrez partager l'URL de la vidéo. Dans la plupart des cas, c'est plus avantageux.

Par exemple, si vous souhaitez ajouter une vidéo YouTube, copiez simplement l'URL de la vidéo et collez-la dans la case "URL de la vidéo".

Mais dans le cas d'une vidéo enregistrée, cela prend un peu de temps. Comme il n'y a pas d'option pour télécharger une vidéo directe, vous devrez partager une URL auto-hébergée. Vous pouvez télécharger des vidéos sur votre site WordPress et les ajouter en utilisant le lien vidéo téléchargé.

Maintenant, tout comme vous avez inséré le lien vidéo YouTube, insérez le lien vidéo auto-hébergé dans la boîte d'URL vidéo par défaut.

add video url
ajouter l'URL de la vidéo

[Remarque : Assurez-vous que l'URL de la vidéo hébergée est accessible au public, sinon personne ne pourrait voir la vidéo.]

Étape 7 : Personnalisez les paramètres vidéo

Après avoir ajouté la vidéo, PostX offre des avantages supplémentaires. Par exemple, vous pouvez régler la durée de la vidéo. Remplissez simplement la case de l'heure de début et de l'heure de fin en fonction de l'heure et de la position où vous souhaitez exécuter la vidéo.

adjust start and end time
régler l'heure de début et de fin

Vous avez également la possibilité d'activer ou de désactiver la "boucle vidéo" et de définir "l'image de secours vidéo".

enable video loop
activer la boucle vidéo

Étape 8 : Ajouter des éléments au bloc intérieur

Vous avez déjà ajouté la vidéo d'arrière-plan. Il est temps de le concevoir. Comme nous avons sélectionné une mise en page 100:00, vous pouvez ajouter un seul élément à la mise en page. Cependant, nous pouvons ajouter plusieurs blocs en dessous.

Vous pouvez également définir le pixel de la vidéo d'arrière-plan. Pour ce faire, placez simplement le curseur sur le coin supérieur ou inférieur du milieu du bloc "Ligne". Dès que vous atteignez la position, vous verrez un pixel affiché à l'intérieur de la ligne. Vous pouvez ensuite cliquer dessus et le faire glisser vers le haut ou vers le bas pour ajuster la taille de la vidéo d'arrière-plan.

customize the row
personnaliser la ligne

Enfin, personnalisez-le selon vos préférences. Nous allons maintenant préparer une vidéo d'arrière-plan personnalisée rapide. Vérifions-le étape par étape.

Guide pratique sur la personnalisation de l'arrière-plan vidéo WordPress

Nous allons maintenant créer une vidéo d'arrière-plan simple présentant un service touristique.

Étape 1 : Suivez les étapes précédentes et ajoutez la vidéo

Nous avons déjà appris les bases. Suivez simplement les étapes ci-dessous et ajoutez une vidéo d'arrière-plan WordPress à l'aide du bloc Ligne/Colonne de PostX.

Étape 2 : Ajouter un en-tête au bloc existant

Maintenant, nous avons sélectionné une mise en page 100:00. Là, vous pouvez ajouter un seul élément. Nous ajoutons le bloc "Heading".

add heading block
ajouter un bloc de titre

Après avoir ajouté le bloc de titre, ajoutez le slogan/service que vous souhaitez afficher dans le titre.

Étape 3 : Ajouter un bloc de paragraphe sous le titre

Maintenant, cliquez simplement sur Entrée ou cliquez sur le bouton "+", et vous verrez un autre bloc sous l'en-tête. C'est, par défaut, un bloc de paragraphe. Écrivez maintenant ce que vous voulez offrir dans le bloc de paragraphe. Pour une meilleure visibilité, nous conservons la couleur du texte "Blanc".

add custom text
ajouter du texte personnalisé

Étape 4 : Ajouter des boutons CTA

Maintenant, de la même manière, après avoir terminé le bloc de paragraphe, appuyez sur le bouton Entrée et un nouveau bloc apparaîtra. Ajoutez maintenant le "Groupe de boutons" par PostX.

add cta button
ajouter un bouton cta

Nous ajoutons 2 boutons CTA (Call to action) pour attirer des clients avec des objectifs différents. Pour mieux personnaliser les boutons, regardez cette vidéo.

La création de la vidéo d'arrière-plan est maintenant terminée. Voyons la sortie finale.

final output of background video

Directives pour ajouter un arrière-plan vidéo dans WordPress

Voici quelques directives recommandées pour ajouter un arrière-plan vidéo à votre site Web WordPress :

Optimisez la taille des fichiers sans sacrifier la résolution

Les vidéos et les images volumineuses peuvent ralentir les performances de votre site. Il est donc important de trouver un

équilibre entre la taille du fichier et la résolution lors de la compression de vos vidéos.

Utilisez les vidéos avec parcimonie

Évitez de surcharger votre site Web avec trop de vidéos. Au lieu de cela, utilisez-les de manière stratégique pour mettre en évidence des points importants ou présenter un contenu pertinent.

Inclure un appel à l'action

Lorsque vous utilisez un arrière-plan vidéo, assurez-vous de fournir des informations supplémentaires ou un bouton clair d'appel à l'action. Ne laissez pas les téléspectateurs en vouloir plus sans proposer un lien ou une direction pour en savoir plus.

Éviter la lecture automatique avec audio

La lecture automatique de l'audio lorsqu'une personne visite votre site Web peut être choquante et perturbatrice. Il est préférable d'éviter complètement la lecture automatique de l'audio.

Fournir une option pour la lecture audio

Si votre vidéo nécessite de l'audio, donnez aux utilisateurs la possibilité de contrôler la lecture audio. Cela leur permet de choisir s'ils veulent ou non écouter l'audio.

Pensez aux sous-titres

Incluez des sous-titres pour les vidéos contenant de l'audio. Cela permet de rendre votre contenu accessible à tous les utilisateurs, y compris ceux qui se trouvent dans un endroit où ils ne peuvent pas lire d'audio ou qui ont une déficience auditive.

Héberger des vidéos en externe

Pour garantir des performances optimales, pensez à utiliser des plates-formes d'hébergement vidéo externes telles que Vimeo ou YouTube. Ces plateformes sont spécialement conçues pour l'hébergement et le streaming vidéo.

Respectez les formats et résolutions recommandés

Lors du téléchargement de vidéos, utilisez le format MP4 avec une résolution minimale de 720p. Assurez-vous également que les vidéos sont encodées à l'aide du codec h264, car il offre une bonne qualité et une bonne compatibilité.

Derniers mots

J'espère que vous avez maintenant bien compris comment ajouter des vidéos d'arrière-plan WordPress. Nous avons ajouté 2 méthodes, et les deux méthodes ont des avantages et des inconvénients.

En résumé, je dirais que si vous souhaitez ajouter une vidéo en arrière-plan ou un lien vidéo, PostX est la meilleure option. Mais si vous souhaitez télécharger une vidéo, le bloc par défaut est l'option la plus simple pour vous.

Obtenez PostX Pro pour déverrouiller toutes les fonctionnalités intéressantes et créer des sites Web incroyables

Vous aimez cet article ? Faire connaitre
  • Use Gutenberg Blocks in Beaver Builder

    Intégration de PostX Beaver Builder : utiliser les blocs Gutenberg dans Beaver Builder

  • WooCommerce Product Variations

    Comment créer des variantes de produits WooCommerce

  • PostX 2.4.9 update

    PostX 2.4.9 : Quoi de neuf ?

  • WordPress Menu Customization in 2022 WordPress Theme

    Personnalisation du menu WordPress dans le thème Twenty Twenty-two