Rendre une vidéo Youtube responsive – Yes You Web !

Publié le 19 octobre 2019

Vous avez intégré une vidéo YouTube dans votre site mais lorsque vous testez votre site sur mobile, la vidéo déborde de l’écran et vous ne pouvez pas la voir en entier. C’est embêtant !

Eh bien nous allons résoudre ce problème en quelques lignes dans cet article.

[external_link_head]

Si vous ne savez pas comment intégrer une vidéo, pas de panique, les cours de rattrapages sont ici :

  • Comment intégrer une vidéo dans une page WordPress
  • Comment intégrer une vidéo Facebook dans WordPress

Intégrer le code avec une classe

Allez sur YouTube et cliquez sur le lien Partager sous la vidéo que vous voulez intégrer :

Rendre une vidéo Youtube responsive - Yes You Web !

[external_link offset=1]

En cliquant sur le bouton « intégrer », vous obtenez un code du style :

Dans ce code d’iframe, vous voyez que sont mentionnés une largeur et une hauteur (width et height), c’est ce qui va nous poser problème lors du passage d’un écran d’ordinateur à une tablette / smartphone.

La 1ère étape est d’allouer une classe à cet iframe. On peut le faire en html pur grâce à un div :

Si vous avez un thème qui vous offre la possibilité de donner une classe à un bloc de texte, vous pouvez également le faire (ici, nous avons le thème Avada).

Rendre une vidéo Youtube responsive - Yes You Web !

Voilà, une fois la classe ajouté, nous allons appliquer la CSS qui va bien.

[external_link offset=2]

Ajouter la CSS

2è étape, intégrer la CSS qui va permettre à la vidéo de se redimensionner selon la taille de l’écran sur laquelle elle sera affichée.

READ  17 trang web và dịch vụ lưu trữ ảnh trực tuyến tố nhất hiện nay

Il vous suffit de copier / coller le code suivant dans votre feuille css.

Conclusion

Voilà, cet article est plutôt simple mais très pratique pour résoudre un problème qui peut virer au casse-tête.

Si vous avez des questions, posez-les en commentaires ci-dessous.

Et n’hésitez pas à partager vos propres retours d’expérience ! [external_footer]

Viết một bình luận