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.

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

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 :

Yes You Web !

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

Copier

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 :

Copier

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).

Yes You Web !

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

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.

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

Copier

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 !