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:
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, etiframe
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).
Merci, cela fonctionne très bien !
Cordialement
Parfait la solution, merci ! (pouce en l’air)
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 ?