Avez-vous déjà essayé de rendre une vidéo YouTube réactive? Si c’est le cas, cela peut être un peu délicat. On peut rencontrer des problèmes surtout sur les sites web entièrement réactifs, dans lesquels on a besoin de redimensionner et d’intégrer les vidéos Youtube en fonction de la taille du navigateur ou de la largeur de l’appareil. Étonnamment, les intégrations YouTube normales ne sont pas automatiquement dimensionnées par rapport à la fenêtre du navigateur lorsqu’elles sont redimensionnées. Heureusement, vous pouvez rendre les vidéos YouTube réactives et adaptées aux mobiles avec du HTML et du CSS simples. Continuez donc à lire cet article si vous voulez apprendre comment intégrer une vidéo Youtube avec un code réactif.
Comment intégrer le code d’une vidéo YouTube
Suivez les étapes décrites ci-dessous pour intégrer une vidéo YouTube dans un site web réactif personnalisé. Tout d’abord, trouvez la vidéo sur YouTube.com et, sous la vidéo, cliquez sur le lien “Partager” et puis sélectionnez l’option intitulée “Intégrer”: une zone de texte avec le code d’intégration <iframe> s’affichera et pourra être copiée dans le presse-papiers. Avant de gérer le code, utilisez les options sélectionnables sous la vidéo pour décider si vous souhaitez que les vidéos suggérées s’affichent une fois votre vidéo terminée. Notre recommandation est de désactiver cette fonctionnalité, car vous ne pouvez pas contrôler les vidéos suggérées par YouTube, et parfois elles ne sont pas pertinentes et inappropriées pour votre site. Une fois que vous avez configuré les préférences vidéo comme vous le souhaitez, cliquez pour sélectionner et utilisez Ctrl+A pour mettre en surbrillance TOUT le code fourni dans la zone de texte comme référence dans la zone verte <iframe> dans la capture d’écran ci-dessus. Copiez le code dans votre presse-papiers en utilisant Ctrl+C, connectez-vous au CMS et accédez à la page sur laquelle vous souhaitez intégrer la vidéo. Puis, cliquez sur le bouton “Source” et le code source HTML s’affiche, ce qui produit ce qui est affiché sur cette page.
Comment rendre le code de la vidéo YouTube réactif
Dans le code, essayez de référencer le contenu textuel pour localiser le meilleur endroit pour intégrer la vidéo, collez le code en utilisant Ctrl+V. Puis, pour ajouter le code d’intégration vidéo responsive: requis pour permettre à la vidéo de s’afficher correctement sur n’importe quel écran ou appareil mobile. Puis, collez le code suivant avant le code d’intégration YouTube:
<div class= »videoWrapper » style= »text-align: center; »>
Puis, collez le code suivant après le code d’intégration Youtube: </div>
Enfin, cliquez à nouveau sur “Source”. Si vous verrez une boîte blanche avec la phrase IFRAME à l’intérieur en rouge, après avoir cliqué sur le bouton Source.