Webdesign

Comment transformer vos vidéos en « responsive » ?

Le 28 décembre 2012, mis à jour le 27 mars 2020 — 3 commentaires

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:

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 Kébaïli

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 !

Commentaires

Le 28 juillet 2017 à 10:39 , Adelaide a dit :

Merci, cela fonctionne très bien !
Cordialement

Votre réponse sera révisée par les administrateurs si besoin.

Le 27 septembre 2017 à 11:00 , Bebop a dit :

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

Votre réponse sera révisée par les administrateurs si besoin.

Le 22 février 2018 à 1:12 , MEHMOOD a 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 ?

Votre réponse sera révisée par les administrateurs si besoin.

Laisser un commentaire

Votre commentaire sera révisé par les administrateurs si besoin.