Comment transformer vos vidéos en « responsive » ?

Quand on intègre une vidéo sur son site, sa taille est déterminée par les attributs « width » (largeur) et « height » (hauteur) présents dans le code. En général, cette taille convient à la largeur de votre site et votre vidéo s’affiche en entier.

Par contre, si vous diminuez la taille de votre navigateur, la vidéo sera « coupée » et un ascenseur horizontal apparaîtra. L’image suivante illustre la situation:

Vidéo non responsive

Les pré-requis

Vous devez préalablement intégrer une vidéo de Youtube, via la fonction « Partager > intégrer ». Elle vous donne le code HTML d’une iframe, à copier-coller dans votre site.

Ca ressemble à ça:

<iframe src="http://www.youtube-nocookie.com/embed/FtgUOIahty5PoM" width="509" height="286" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Comme vous le voyez, les attributs HTML « height » et « width » indiquent une hauteur et une largeur. Le problème, c’est que ces dimensions vont empêcher la vidéo d’être affichée à une taille inférieure.

La solution

Le but de cette astuce va être de positionner la vidéo par rapport à l’élément qui l’encadre, grâce à un contexte de positionnement.

Pour ce faire, il suffit de rajouter un « div » autour de notre vidéo, et appliquer un code CSS spécifique sur « le parent » et « l’enfant ». Et c’est tout!

Le saviez-vous ? « parent » et « enfant » sont les termes techniques pour désigner respectivement l’élément html qui encadre et celui qui est encadré. Par exemple, dans <div><iframe></iframe></div> , div est le parent, et iframe l’enfant.

Le code

<div class="videoWrapper"><iframe src="http://www.youtube-nocookie.com/embed/FtgUOIahty5PoM" width="509" height="286" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
/* Le parent */
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
/* L'enfant */
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

A présent, votre vidéo devrait s’adapter à la taille de votre navigateur, au fur et à mesure que celui-ci diminue (ou augmente).

 

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+

Youcef

Consultant en référencement, chef de projet Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Avec ce blog, ma mission est d'aider les entrepreneurs, qui ne sont pas spécialistes du web, à réussir leur propre site, et qu'il soit surtout visible !

Vous aimerez aussi...

2 réponses

  1. Adelaide dit :

    Merci, cela fonctionne très bien !
    Cordialement

  2. Bebop dit :

    Parfait la solution, merci ! (pouce en l’air)

Laisser un commentaire

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