Comment intégrer une vidéo YouTube réactive dans WordPress (sans code)

Au cours de mes années d'expérience dans le domaine du marketing en ligne, j'ai pu constater à quel point l'ajout de contenu sur YouTube peut être efficace pour promouvoir votre marque.

Si vous choisissez les bonnes vidéos YouTube à montrer, vous serez en mesure de le faire :

• Faites la promotion de vos vidéos et obtenez plus de vues, de likes et d'abonnés sur votre chaîne.
• Montrez des avis positifs et des démonstrations de produits pour stimuler directement vos ventes.
• Les internautes restent plus longtemps sur votre site web, ce qui est excellent pour votre référencement.

Mais aujourd'hui, la majorité des internautes utilisent leur téléphone. Et si vos vidéos ne se chargent pas sur les appareils mobiles, vous aurez plus de mal à retenir l'attention des internautes.

C'est là que les vidéos réactives entrent en jeu. Ces vidéos s'adaptent automatiquement à toutes les tailles d'écran, qu'il s'agisse d'un téléphone, d'une tablette ou d'un ordinateur, afin que tout le monde ait une bonne expérience de visionnage.

Dans cet article, je vais vous présenter une méthode simple pour intégrer des vidéos YouTube qui s'affichent parfaitement sur n'importe quel appareil.

Dans cet article

Comment intégrer des vidéos réactives sur YouTube

Couvrons toutes nos bases et examinons toutes les façons d'ajouter des vidéos YouTube à WordPress :

• Manuel: Copiez le code d'intégration d'une vidéo YouTube, collez-le sur votre site web et modifiez manuellement les extraits de code pour rendre votre vidéo réactive.
• Automatique : Laissez un plugin WordPress récupérer automatiquement les vidéos et les ajouter à votre site, afin qu'il soit réactif dès le départ.

La première méthode peut fonctionner, mais à quelques conditions. Tout d'abord, vous devez être à l'aise avec l'insertion et la modification d'extraits de code.

Deuxièmement, vous devez être prêt à consacrer le temps et les efforts nécessaires à la création de codes d'intégration et à leur modification et ajout répétés dans WordPress.

À long terme, ces problèmes peuvent vraiment faire des ravages. De plus, l'absence d'une équipe d'assistance peut s'avérer très pénible en cas de problème lors de l'insertion du code.

Le plus simple est de choisir un bon plugin WordPress et de le laisser faire le travail à votre place, afin que vous puissiez vous concentrer sur des choses plus importantes.

Parmi toutes les options disponibles sur le marché, j'ai opté pour YouTube Feed Pro pour plusieurs raisons.

Grâce à cet outil, vos vidéos YouTube s'affichent parfaitement sur tous les appareils, qu'il s'agisse de smartphones, de tablettes ou d'ordinateurs de bureau, et ce dès leur sortie de l'emballage.

J'ai également été surpris par sa simplicité d'utilisation. Vous pouvez simplement suivre un flux guidé et le plugin vous guidera tout au long du processus de création, de personnalisation et d'intégration des flux vidéo YouTube.

Voici quelques autres points forts que j'ai remarqués en utilisant YouTube Feed Pro :

• Affichez votre chaîne YouTube, vos listes de lecture et même vos diffusions en direct dans différentes mises en page.
• Personnalisez l'aspect de vos vidéos grâce à un éditeur en direct
• Modérez votre flux et contrôlez les vidéos qui s'affichent sur votre site web.
• Ajouter plusieurs vidéos YouTube à WordPress en 3 étapes simples
• Créer des flux YouTube personnalisés à l'aide de requêtes de recherche avancées sur YouTube
• Assurez-vous que votre site se charge très rapidement, même lorsque vous intégrez de nombreuses vidéos.

Dans l'ensemble, il s'agit d'un outil très utile, qui vous permet d'éviter le casse-tête du code.

Si vous souhaitez tester cet outil par vous-même, vous pouvez commencer à utiliser YouTube Feed Pro ici.

La façon la plus simple d'intégrer des vidéos réactives

Je vais maintenant vous montrer comment vous pouvez utiliser le plugin pour ajouter des vidéos YouTube qui fonctionnent parfaitement sur toutes les tailles d'écran.

Il suffit de suivre les étapes ci-dessous :

Étape 1 : Ajouter YouTube Feed Pro à votre site Web

Commencez par vous procurer une copie du plugin YouTube Feed Pro ici.

Une fois l'outil téléchargé, installez-le sur votre site.

Conseil pour les débutants: vous pouvez suivre ces instructions étape par étape sur l'installation d'un plugin WordPress pour plus d'informations.

Étape 2 : Utiliser le plugin pour créer un flux YouTube

Ensuite, cliquez sur le menu YouTube Feed " All Feeds que vous trouverez dans votre tableau de bord WordPress.

Sélectionnez l'option Ajouter nouveau pour commencer à intégrer vos vidéos YouTube.

Grâce à ce plugin, vous pouvez sélectionner différents types de flux qui déterminent la source de vos vidéos YouTube.

Quel que soit le type de flux que vous choisissez, le plugin rendra automatiquement vos vidéos réactives, de sorte qu'elles s'afficheront parfaitement sur n'importe quel appareil et n'importe quelle taille d'écran.

Cela dit, voici les 6 types d'aliments que vous pouvez choisir :

• Chaîne: Ajoutez des vidéos réactives provenant d'une chaîne YouTube spécifique.
• Liste de lecture: Affiche les vidéos réactives de la liste de lecture YouTube que vous avez choisie.
• Recherche: Affichez des vidéos YouTube réactives en fonction de mots ou d'expressions de recherche spécifiques.
• Flux en direct: Ajoutez des vidéos réactives de flux en direct existants ou à venir sur YouTube.
• Vidéos individuelles: Affichez les vidéos YouTube réactives individuellement.

Choisissez votre type de flux et cliquez sur le bouton Suivant.

Pour cet exemple, je montrerai des vidéos provenant d'une liste de lecture YouTube, mais vous pouvez choisir n'importe quelle option.

Étape 3 : Connecter votre nouveau flux à YouTube

Après avoir choisi votre type de flux YouTube, vous verrez une fenêtre contextuelle vous demandant une clé API.

Cette clé permet à votre site web de communiquer avec YouTube et de récupérer des vidéos.

Conseil pour les débutants: si vous n'avez pas encore de clé API, consultez ce tutoriel sur la création d'une clé API YouTube.

Une fois que vous avez votre clé API, il vous suffit de la coller dans la fenêtre contextuelle et de cliquer sur Ajouter.

Une fois votre clé API ajoutée, vous pouvez entrer une source pour les vidéos.

Selon le type de flux choisi précédemment, il peut s'agir d'une chaîne YouTube, d'une liste de lecture, d'un terme de recherche, etc.

Puisque j'ai opté pour une liste de lecture tout à l'heure, je vais mettre en lien une liste de lecture YouTube aléatoire à titre d'exemple.

Ouvrez la liste de lecture dans votre navigateur web et copiez l'ID à la fin de l'URL, comme dans cette capture d'écran :

Retournez ensuite sur votre site web et collez cet identifiant dans la fenêtre contextuelle.

Enfin, cliquez sur Suivant pour terminer l'ajout de la source de vos vidéos YouTube.

Étape 4 : Personnaliser votre flux de vidéos YouTube réactif

Ensuite, le plugin récupère les vidéos et crée un flux YouTube qui est 100 % réactif et qui correspond à la conception de votre site.

De plus, le plugin vous permet de choisir parmi différents modèles au design unique. Vous avez le choix entre 8 options :

• Défaut
• Carrousel
• Cartes
• Liste
• Galerie
• Dernière vidéo
• Carrousel de présentation
• Widget

Il vous suffit de sélectionner le modèle de flux dont vous préférez le design, puis de cliquer sur Suivant.

J'ai choisi les modèles par défaut car je veux un flux simple qui peut afficher beaucoup de vidéos à la fois.

Et si vous voulez avoir plus de contrôle sur l'aspect de votre flux vidéo, vous pouvez utiliser l'éditeur de flux en direct.

C'est ici que se fait la majeure partie de la personnalisation. Vous pouvez modifier la mise en page, l'en-tête, les boutons, les éléments vidéo et bien plus encore.

De plus, vous pouvez même voir un aperçu en direct de la façon dont votre flux YouTube s'affichera sur différents écrans.

En cliquant sur les icônes en haut, vous pouvez voir comment les vidéos s'affichent sur un téléphone portable, une tablette ou un ordinateur.

Commençons donc la personnalisation. Comme il y a beaucoup d'options, je vais passer par ma routine de personnalisation habituelle pour que vous puissiez avoir une idée générale de la façon d'utiliser les options.

Cliquez donc sur l'option Feed Layout (présentation du flux) à gauche.

Sur le panneau de gauche, vous verrez les 4 options de mise en page que vous pouvez choisir :

• Grille
• Galerie
• Liste
• Et carrousel

Vous voulez que vos vidéos s'affichent en rangées et en colonnes bien ordonnées ?

Vous pouvez alors opter pour la présentation en grille. Voici à quoi ressemble cette mise en page :

Mais qu'en est-il si vous souhaitez que l'accent soit mis sur une vidéo spécifique ?

La mise en page " Galerie" affiche un grand lecteur vidéo sous lequel se trouvent des vignettes plus petites.

Vous cherchez quelque chose qui donne plus d'espace à vos vidéos ?

Vous pouvez utiliser la présentation en liste et afficher les vidéos dans une seule colonne.

Si vous souhaitez rendre votre site web plus interactif, vous pouvez opter pour la mise en page Carousel.

Voici ce que cela peut donner sur votre site web :

Une fois que vous avez sélectionné la mise en page de votre flux YouTube réactif, cliquez sur Enregistrer pour finaliser votre choix.

Vous pouvez également utiliser le panneau de gauche pour modifier le nombre de vidéos, de lignes et de colonnes.

Ensuite, nous allons cliquer sur l'option Personnaliser en haut à gauche.

Puisque la mise en page est prête, il est temps de changer les couleurs.

Vous pouvez le faire à partir de l'option Schéma de couleurs sur la gauche.

Pour simplifier les choses, vous avez le choix entre 4 schémas de couleurs :

• Hériter du thème : Cette option pratique permet de copier les couleurs de votre thème pour le flux vidéo de YouTube.
• Léger : Le schéma classique de couleurs claires avec un fond blanc clair et une police de caractères foncée.
• Sombre : Cette option est à l'opposé, avec un arrière-plan sombre et une couleur de police blanche.
• Personnalisé : Pour un contrôle total des couleurs, vous pouvez choisir manuellement toutes les couleurs.

Comme d'habitude, choisissez l'option qui vous convient et cliquez sur Enregistrer.

Je pense que vous avez compris l'idée. Utilisez les options restantes pour modifier votre en-tête, vos éléments vidéo, vos boutons, etc.

Vous pouvez même afficher une bannière d'abonnement sous la vidéo, afin que les internautes puissent s'abonner directement pendant qu'ils regardent la vidéo.

Lorsque vous êtes satisfait de la conception de votre flux, cliquez sur Enregistrer et passez à la dernière étape ci-dessous.

Étape 5 : Intégrer le flux vidéo réactif de YouTube

Pour vous donner plus de contrôle, il y a deux façons d'ajouter ce flux YouTube à votre site web :

• Sur votre page WordPress
• Ou sur vos zones prêtes à accueillir des widgets, comme la barre latérale ou le pied de page.

Je vais passer en revue les deux options ci-dessous :

Intégrer des vidéos YouTube réactives sur une page WordPress

Pour gagner du temps, vous pouvez ajouter directement la vidéo à une page à partir d'ici.

Utilisez le bouton " Embed" en haut de la page pour commencer.

Cette opération ouvre une fenêtre contextuelle présentant toutes les possibilités d'intégration de ce flux YouTube.

Vous pouvez choisir un emplacement ou simplement copier le shortcode pour l'ajouter manuellement n'importe où sur votre site.

Pour l'instant, utilisons l'option Ajouter à une page.

La fenêtre contextuelle affichera alors une liste de vos pages WordPress publiées.

Choisissez la page sur laquelle vous souhaitez insérer des vidéos YouTube réactives et cliquez sur Ajouter.

Il suffit d'attendre quelques secondes pour que le plugin ouvre la page dans l'éditeur de WordPress.

À partir de là, ajoutons un nouveau bloc à l'aide de l'icône plus (+).

Ce faisant, vous verrez apparaître un panneau avec les différents blocs WordPress que vous pouvez ajouter à une page.

Utilisez la barre de recherche pour trouver "youtube feed" , puis cliquez sur le bloc Feeds for YouTube.

Cette opération vous donnera automatiquement un aperçu de ce à quoi ressemblera votre flux de vidéos YouTube responsive intégré à votre page.

Pour que le flux de vidéos réactives soit visible sur votre site web, cliquez sur Mettre à jour.

Vous pouvez ainsi ouvrir votre site web et voir à quoi ressemblent vos vidéos. Voici à quoi ressemble mon exemple :

Embed Responsive YouTube Videos on WordPress Sidebar or Footer (Intégrer des vidéos YouTube réactives dans la barre latérale ou le pied de page de WordPress)

Si vous préférez intégrer vos vidéos réactives dans votre barre latérale ou votre pied de page, vous pouvez également le faire avec le plugin.

Tout d'abord, nous devons rouvrir l'éditeur de flux en direct (au cas où vous l'auriez quitté), ce qui est assez facile.

Depuis votre tableau de bord WordPress, naviguez vers Flux YouTube " Tous les flux puis cliquez sur le flux que vous souhaitez intégrer.

Cela ouvrira l'éditeur de flux en direct que nous connaissons déjà.

Cliquez ensuite sur le bouton " Embed" en haut de la page pour continuer.

Cette fois, cliquez sur le bouton Ajouter à un widget dans la fenêtre contextuelle.

Attendez quelques secondes et YouTube Feed Pro ouvrira la page des widgets de votre site.

À partir de cette page, vous pouvez choisir l'un des panneaux du pied de page ou de l'en-tête pour afficher vos vidéos YouTube réactives.

Le nombre exact de panneaux varie en fonction de votre thème WordPress.

Pour cet exemple, je vais sélectionner le panneau Sidebar, mais vous pouvez choisir n'importe quel emplacement.

Après avoir ouvert le panneau, vous pouvez ajouter un nouveau widget en cliquant sur l'icône plus (+) ici.

Enfin, sélectionnez le widget Feeds for YouTube pour intégrer vos vidéos.

Vous pouvez maintenant cliquer sur Mettre à jour pour confirmer votre nouveau widget de flux YouTube.

Ainsi, lorsque vous visitez votre site web, vous pouvez voir vos vidéos réactives intégrées dans votre barre latérale :

Et le tour est joué !

Commencez à intégrer vos vidéos YouTube réactives dès maintenant

D'après ma propre expérience, s'assurer que vos vidéos YouTube sont réactives est l'une des choses les plus importantes que vous puissiez faire pour votre site web.

Après tout, personne n'aime regarder des vidéos qui ne s'adaptent pas à la taille de son écran, n'est-ce pas ?

Ce guide a montré qu'il n'est pas nécessaire de se battre avec du code pour y parvenir.

L'utilisation de Smash Balloon YouTube Feed Pro est le moyen le plus direct et le plus fiable de s'assurer que vos vidéos s'affichent parfaitement sur tous les appareils, à tout moment.

Voici comment vous pouvez commencer :

• Obtenez votre copie de YouTube Feed Pro et essayez-le sans risque pendant 14 jours pour commencer à intégrer des vidéos YouTube entièrement réactives sur votre site WordPress.
• Utilisez l'éditeur de flux en direct pour personnaliser facilement votre flux vidéo réactif afin qu'il corresponde parfaitement au style de votre marque.
• Intégrez de manière transparente votre nouveau flux vidéo YouTube convivial sur n'importe quelle page, article ou zone de widget de la barre latérale.

Avez-vous des questions sur l'intégration de vidéos YouTube réactives ou sur l'utilisation de YouTube Feed Pro ? N'hésitez pas à me les poser dans les commentaires ci-dessous.

Vous avez un site web Elementor ? Voici comment intégrer votre chaîne YouTube sur Elementor.

Plus de guides et de tutoriels sur le marketing YouTube

• Comment promouvoir vos vidéos YouTube GRATUITEMENT (Conseils d'experts)
• Les meilleurs plugins YouTube pour augmenter vos abonnés dès maintenant
• Comment gagner de l'argent sur YouTube sans montrer son visage ?
• Les raisons pour lesquelles vos courts-métrages YouTube ne sont pas vus [+ ce qu'il faut faire]
• YouTube Shorts vs TikTok : Qu'est-ce qui vous convient le mieux ?