Comment mettre "Responsive" les vidéos YouTube

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 :

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Ensuite, ajouter ce code HTML dans votre code d’intégration :
<div class="video-container">CODE DE L'IFRAME VIDEO YOUTUBE</div>

Et voilà. Vous voici en « Responsive » pour vos vidéos YouTube ! Magnifique non ?

 

0 réponses

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. Apprenez comment les données de vos commentaires sont utilisées.