Sélectionner une page

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 ?
 

Florent Maillefaud

Comment mettre "Responsive" les vidéos YouTube 1Webmaster à Sablons (Isère) / Création de sites internet WordPress.

Micro-entrepreneur depuis 2012, je vous propose la création ou la refonte de votre site internet sous WordPress et à votre image.

Que ce soit un site vitrine, un blog ou un site e-commerce pour votre entreprise ou association, laissez votre empreinte sur le web !

Share This