Je suis tombé sur un petit problème lors de l’ajout d’une vidéo à partir de YouTube sur un de mes projets.
Étant donné que ce site est entièrement « Responsive », il me fallait un code vidéo YouTube pour modifier la taille en fonction de la taille du navigateur ou de la largeur appareil. Dans le code par défaut d’intégration fourni par YouTube la vidéo a une hauteur et une largeur fixes.
Cela avait l’air très bien sur les ordinateurs de bureaux, mais presque cassé le template lors de la visualisation sur un appareil mobile. J’avais donc besoin d’un code embed « Responsive » YouTube.
Comment mettre « Responsive » les vidéos YouTube
Le correctif a été en fait assez simple, et voici comment.
Vous aurez besoin d’envelopper le code d’intégration avec un <div> et spécifiez un fond de 50% à 60% de remplissage. Puis spécifiez pour les éléments enfants (iframe, objet embed) la largeur de 100%, 100% de la hauteur, en position absolue. Cela va forcer les éléments EMBED pour étendre pleine largeur automatiquement. Exactement ce qu’il nous faut.
D’abord, vous aurez besoin d’ajouter ce qui suit à votre feuille de style :
[pastacode manual= ».video-container%20%7B%0D%0A%20%20%20%20position%3A%20relative%3B%0D%0A%20%20%20%20padding-bottom%3A%2056.25%25%3B%0D%0A%20%20%20%20padding-top%3A%2030px%3B%20height%3A%200%3B%20overflow%3A%20hidden%3B%0D%0A%7D%0D%0A%0D%0A.video-container%20iframe%2C%0D%0A.video-container%20object%2C%0D%0A.video-container%20embed%20%7B%0D%0A%20%20%20%20position%3A%20absolute%3B%0D%0A%20%20%20%20top%3A%200%3B%0D%0A%20%20%20%20left%3A%200%3B%0D%0A%20%20%20%20width%3A%20100%25%3B%0D%0A%20%20%20%20height%3A%20100%25%3B%0D%0A%7D » provider= »manual » lang= »css »/]
Ensuite, ajouter ce code HTML dans votre code d’intégration :
[pastacode manual= »%3Cdiv%20class%3D%22video-container%22%3ECODE%20DE%20L’IFRAME%20VIDEO%20YOUTUBE%3C%2Fdiv%3E » provider= »manual » lang= »default »/]
Et voilà. Vous voici en « Responsive » pour vos vidéos YouTube ! Magnifique non ?
Commentaires