De nombreux propriétaires de sites Web souhaitent ajouter la lecture automatique des vidéos intégrées Instagram à leurs pages afin d'attirer instantanément l'attention des visiteurs.
Malheureusement, coller le code natif dans votre site et espérer que la vidéo se lance automatiquement vous décevra.
Je sais exactement à quel point il est frustrant de passer du temps à modifier le code HTML pour finalement se rendre compte que l'iframe standard d'Instagram bloque complètement la lecture automatique.
Cela semble être un obstacle majeur lorsque vous souhaitez simplement que votre contenu social dynamique se démarque et suscite l'intérêt des utilisateurs.
La bonne nouvelle, c'est que vous pouvez toujours profiter des avantages de la vidéo animée pour attirer l'attention sans les inconvénients de la méthode manuelle défaillante.
Dans ce guide, je vais vous expliquer pourquoi la lecture automatique native échoue et vous présenter une solution bien plus efficace pour afficher vos vidéos sans aucun problème.
- Peut-on réellement activer la lecture automatique sur une vidéo Instagram intégrée ?
- La meilleure façon d'afficher des vidéos Instagram intégrées sur votre site web
- Comment intégrer des vidéos Instagram sur votre site web [méthode recommandée]
- Prêt à intégrer correctement les vidéos Instagram ?
Peut-on réellement activer la lecture automatique sur une vidéo Instagram intégrée ?
Non, vous ne pouvez pas activer la lecture automatique sur une vidéo Instagram intégrée standard.
Si vous avez essayé d'ajouter la lecture automatique à votre code d'intégration Instagram et que rien ne s'est passé, vous n'êtes pas seul.
Au lieu d'intégrer réellement la vidéo, le code d'intégration officiel d'Instagram génère un iframe qui montre à quoi ressemble la vidéo.
Lorsqu'un visiteur clique sur la vidéo, il est simplement redirigé vers Instagram. Cela signifie que vous perdez un visiteur sur votre site web, ce qui est un gros problème.
Voici un bref résumé de ce que vous devez savoir :
- The native Instagram embed uses an <iframe>, and browsers block autoplay on <iframe> content from third-party sources by default.
- Le système d'intégration propre à Instagram ne prend pas en charge l'attribut autoplay : son ajout au code n'a aucun effet.
- Il existe une solution qui vous permet d'obtenir le même résultat accrocheur sans avoir recours à la lecture automatique défectueuse. Nous vous l'expliquons dans ce guide.
La lecture automatique sur les intégrations Instagram est-elle vraiment une bonne idée ?
La lecture automatique peut rapidement attirer l'attention, mais elle présente des inconvénients réels qu'il convient d'évaluer avant de l'utiliser.
La réponse honnête est : cela dépend de vos objectifs, car il existe de véritables compromis des deux côtés.
Voici un aperçu équilibré des avantages et des inconvénients :
| Les arguments en faveur de la lecture automatique | Les arguments CONTRE la lecture automatique |
|---|---|
| Capte instantanément l'attention des visiteurs | Ralentit la vitesse de chargement des pages — les vidéos sont des fichiers volumineux |
| Maintient l'intérêt des utilisateurs sur la page | Non pris en charge par les intégrations natives Instagram |
| Affiche du contenu dynamique sans nécessiter de clic | Les navigateurs bloquent de plus en plus souvent la lecture automatique et le son. |
| Peut être perçu comme intrusif par les visiteurs |
La bonne nouvelle, c'est qu'il existe un moyen de profiter des avantages de la lecture automatique, qui attire l'attention, sans pénaliser la vitesse de chargement de la page.
La meilleure façon d'afficher des vidéos Instagram intégrées sur votre site web
La méthode manuelle d'intégration d'Instagram ne fonctionne pas pour la lecture automatique, car vous n'avez aucun contrôle sur le comportement du lecteur Instagram.
When you copy the official embed code from Instagram, it generates an <iframe> tag that loads Instagram’s external player directly onto your page.
Même si Instagram prenait en charge la lecture automatique, les navigateurs modernes la bloqueraient probablement de toute façon.
« Comme vous l'avez peut-être remarqué, les navigateurs Web adoptent des politiques plus strictes en matière de lecture automatique afin d'améliorer l'expérience utilisateur, de minimiser les incitations à installer des bloqueurs de publicités et de réduire la consommation de données sur les réseaux coûteux et/ou limités. »
– Chrome pour les développeurs
En résumé, la lecture automatique des vidéos intégrées provenant de tiers est bloquée à deux niveaux : par Instagram et par le navigateur lui-même.
La meilleure solution : obtenez un comportement similaire à la lecture automatique avec Instagram Feed Pro
Instagram Feed Pro est un plugin WordPress qui vous permet de profiter des avantages de la lecture automatique, qui attire l'attention, sans en subir les inconvénients.
Au lieu de charger un fichier vidéo lourd dès l'ouverture de votre page, Instagram Feed Pro affiche une vignette légère.
Lorsqu'un visiteur clique dessus, la vidéo est diffusée directement sur votre site dans une fenêtre contextuelle sans le rediriger vers Instagram.
Cela signifie que vous bénéficiez d'une expérience vidéo dynamique et captivante sans ralentir la vitesse de chargement de la page ni risquer de perdre des visiteurs au profit d'Instagram.
Voici un aperçu rapide des fonctionnalités du plugin :
- Mises à jour automatiques avec vos dernières publications Instagram — aucun rafraîchissement manuel nécessaire
- Personnalisateur visuel intégré pour contrôler l'apparence du flux des vidéos Instagram
- Thèmes et modèles prédéfinis pour choisir rapidement un design accrocheur
- Prend en charge les flux Instagram avec hashtag, les @mentions, les albums photo et les Stories.
- Les vidéos sont lues sur votre site (dans une fenêtre contextuelle) afin que les visiteurs n'aient pas à quitter votre page.
Comme les vidéos ne se chargent que lorsque le visiteur clique sur « Lecture », votre page reste rapide, même lorsque vous affichez de nombreuses vidéos.
En plus d'offrir une meilleure expérience aux visiteurs, cela est également très bénéfique pour le référencement naturel (SEO) de votre site.
Prêt à ajouter des vidéos Instagram intégrées et à profiter de la lecture automatique ?
Vous pouvez vous inscrire à Instagram Feed Pro ici!
Comment intégrer des vidéos Instagram sur votre site web [méthode recommandée]
Voici un guide détaillé pour configurer Instagram Feed Pro sur votre site WordPress. L'ensemble du processus prend environ 5 minutes.
Étape 1 : Installer et activer le plugin Instagram Feed Pro
Pour commencer, vous devez acheter et télécharger Instagram Feed Pro ici.
Une fois que vous avez le fichier du plugin, installez-le et activez-le sur votre site WordPress (consultez ce guide pour débutants pour obtenir de l'aide sur cette étape).
Étape 2 : Créer un flux vidéo Instagram
Il est maintenant temps de créer votre premier flux vidéo Instagram. Accédez à Flux Instagram » Tous les flux depuis votre tableau de bord WordPress.
Cliquez sur le bouton Ajouter nouveau pour démarrer le processus de configuration.
Il vous sera ensuite demandé de choisir un type de flux : vous pouvez sélectionner Chronologie utilisateur, Hashtag public ou Publications taguées.
Une fois que vous avez fait votre sélection, cliquez sur Suivant pour continuer.
Étape 3 : Connecter votre compte Instagram
Sur l'écran suivant, vous devrez connecter votre compte Instagram afin que le plugin puisse récupérer votre contenu. Cliquez sur le bouton Ajouter une source pour commencer.
Vous serez invité à choisir un type de connexion : basique ou avancée.
Fonctionnalités de base pour un flux Instagram simple qui vous permet d'afficher vos propres publications.
D'autre part, une connexion avancée vous permet d'afficher les flux de hashtags, les stories Instagram et les mentions.
Sélectionnez celui qui correspond à vos besoins, puis cliquez sur Connecter.
Comme nous utilisons un flux basique, vous pouvez cliquer sur le bouton « Se connecter à Instagram ».
Une connexion avancée signifie que vous devrez vous connecter via Facebook, mais le processus reste identique.
Ensuite, vous pouvez choisir de donner au plugin un accès en lecture seule à votre compte Instagram.
Remarque : comme il s'agit d'un accès en lecture seule, le plugin peut uniquement consulter vos informations et ne peut apporter aucune modification. Découvrez pourquoi Smash Balloon est sûr.
Il suffit de cliquer sur Autoriser pour donner au plugin l'autorisation d'accéder à votre compte.
Enfin, sélectionnez votre compte Instagram comme source et cliquez sur Suivant.
Étape 4 : Personnalisez vos vidéos Instagram intégrées
C'est ici que vous pouvez contrôler précisément l'apparence de vos vidéos Instagram et le contenu qui s'affiche.
Sur l'écran suivant, sélectionnez un thème de flux parmi les options proposées. Chaque thème modifie les couleurs, les icônes, le style des publications, etc.
Après avoir sélectionné une option, cliquez sur Suivant.
Ensuite, vous passez à la sélection d'un modèle correspondant à votre design. Chaque modèle affichera vos publications dans une mise en page différente.
Comme précédemment, vous pouvez cliquer sur Suivant pour confirmer votre choix.
Filtrer votre flux pour n'afficher que les vidéos
Si vous le souhaitez, vous pouvez utiliser ce flux pour afficher simultanément des vidéos et des photos Instagram intégrées.
Pour n'afficher que les vidéos, cliquez d'abord sur Paramètres en haut, puis sélectionnez Filtres et modération.
Faites défiler vers le bas jusqu'à la section Afficher des types de publications spécifiques.
Désélectionnez l'option Photos afin que votre flux n'affiche que du contenu vidéo.
Vous pouvez ensuite choisir d'afficher les vidéos du fil d'actualité, les bobines ou les deux.
Une fois que vous êtes satisfait de votre sélection, cliquez sur Enregistrer les modifications.
Cliquez maintenant sur le bouton Paramètres pour ouvrir à nouveau le personnalisateur visuel.
Cette fois-ci, cliquez sur l'onglet Personnaliser en haut.
Choisir une disposition du flux
À droite, vous avez un aperçu en direct de vos intégrations Instagram. Et à gauche, vous avez un panneau avec les options de personnalisation.
Tout d'abord, cliquez sur « Feed Layout » (Mise en page du flux) pour vérifier les mises en page disponibles.
Ensuite, le panneau affichera 4 mises en page parmi lesquelles vous pourrez choisir : Grille, Carrousel, Maçonnerie ou Mise en avant.
Une grille est idéale pour afficher simultanément un grand nombre de publications Instagram. D'autre part, vous pouvez utiliser une disposition en mosaïque pour conserver les proportions d'origine de vos vidéos Instagram.
Vous pouvez également utiliser une disposition en carrousel pour rendre votre site interactif ou mettre en avant certaines vidéos grâce à une disposition en surbrillance.
Cliquez sur Enregistrer une fois que vous avez choisi votre mise en page.
Ajuster le style des publications
Tout d'abord, revenons aux principales options de personnalisation. Il suffit de cliquer sur le bouton Personnaliser en haut à gauche.
Toujours dans le personnalisateur, cliquez sur Articles pour régler l'apparence de chaque article.
À partir de là, vous pouvez personnaliser l'apparence de chaque publication Instagram, avec des options telles que :
- Style de la poste
- Images et vidéos
- Légende
- Résumé des mentions « J'aime » et des commentaires
- État au survol
Pour l'instant, cliquez sur l'option Style de publication ici.
Sous Style de publication, vous pouvez choisir entre Encadré ou Normal selon l'apparence que vous préférez.
Comme précédemment, cliquez sur Enregistrer pour enregistrer vos modifications avant de continuer.
Une vidéo encadrée sera affichée séparément de votre arrière-plan, et vous pourrez choisir la couleur de l'arrière-plan, la taille de la bordure et l'ombre.
De même, une vidéo Instagram classique sera intégrée à la page ou à l'arrière-plan de la barre latérale sans séparation.
Étape 5 : Ajoutez des vidéos Instagram intégrées à votre site
Une fois vos vidéos Instagram configurées et personnalisées, il est temps de les ajouter à votre site.
Instagram Feed Pro vous propose deux façons simples de le faire : sur une page, ou dans une zone de widget dans la barre latérale ou le pied de page.
Comment afficher des vidéos Instagram intégrées sur une page
Cliquez sur le bouton « Intégrer » en haut pour afficher les différentes façons d'ajouter du contenu Instagram à votre site.
Comme vous pouvez le constater, Instagram Feed Pro vous fournit un shortcode ou vous permet d'afficher des vidéos sur une page ou un widget.
Dans la fenêtre contextuelle, vous pouvez cliquer sur Ajouter à une page.
Cela affiche une liste des pages que vous avez publiées sur votre site web.
Sélectionnez la page WordPress où vous souhaitez que le flux apparaisse, puis cliquez sur Ajouter.
Une fois dans l'éditeur de page, cliquez sur l'icône plus (+) pour ajouter un nouveau bloc.
Cela fonctionne comme n'importe quel autre bloc WordPress : pas besoin de gérer les codes d'intégration.
Recherchez « Instagram » et sélectionnez le bloc Instagram Feed dans les résultats.
Lorsque vous êtes satisfait du résultat, cliquez sur Publier pour mettre le flux en ligne sur votre page.
Comment afficher des vidéos Instagram intégrées dans votre barre latérale ou votre pied de page
Vous pouvez également ajouter vos vidéos à une zone de widget si vous préférez. Cela ne fonctionne que si votre thème WordPress prend en charge les widgets de barre latérale ou de pied de page.
Tout d'abord, rendez-vous dans Instagram Feed » All Feeds (Flux Instagram » Tous les flux) et cliquez sur le flux vidéo Instagram que vous avez créé.
Comme précédemment, cliquez sur l'option « Intégrer » pour ouvrir la fenêtre contextuelle.
Vous verrez les mêmes options qu'auparavant.
Cette fois-ci, cliquez sur l'option Ajouter à un widget dans la fenêtre contextuelle.
Après quelques instants, le plugin vous redirigera vers la page Widgets de votre site web.
À partir de là, sélectionnez le panneau Barre latérale ou choisissez le panneau Pied de page.
La dernière étape est la même dans les deux cas, alors sélectionnez l'emplacement que vous souhaitez pour vos vidéos.
Cliquez sur l'icône plus (+) dans la zone du widget et sélectionnez le widget Instagram Feed pour l'ajouter.
Votre flux vidéo apparaîtra désormais dans la zone de widget que vous avez choisie sur votre site.
Prêt à intégrer correctement les vidéos Instagram ?
Si vous souhaitez que vos vidéos Instagram captivent les visiteurs sans ralentir votre site ni rediriger les utilisateurs vers Instagram, Instagram Feed Pro est la solution la plus simple que nous ayons testée.
Vous bénéficiez de l'impact visuel de la lecture automatique, de temps de chargement ultra-rapides et d'un contrôle total sur la conception de vos vidéos Instagram.
Prêt à ajouter des vidéos Instagram intégrées à votre site ? Procurez-vous une copie d'Instagram Feed Pro ici!
Pendant que vous êtes ici, vous pouvez également consulter ce guide qui explique comment ajouter la fonctionnalité de chat Instagram à votre site WordPress.
