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

 

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

3 réponses

  1. Adelaide dit :

    Merci, cela fonctionne très bien !
    Cordialement

  2. Bebop dit :

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

  3. MEHMOOD dit :

    Bonjour pour ma part la vidéo s’adapte parfaitement à mon site mais quand je suis sur mobile c’est autre chose il y a quelque bouton qui ne s’affiche pas ( mon tél est pas assez grand ) . j’ai essayer de télécharger des plugins comme WPTOUCH mais rien à faire …. Une solutions dois-je aussi copier ce code mais le coller ou ?

Laisser un commentaire

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