Skip to main content

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. Voici comment transformer une vidéo en 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

&lt;div class="videoWrapper"&gt;&lt;iframe src="http://www.youtube-nocookie.com/embed/FtgUOIahty5PoM" width="509" height="286" frameborder="0" allowfullscreen="allowfullscreen"&gt;&lt;/iframe&gt;&lt;/div&gt;

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

Questions fréquentes

1. Qu’est-ce qu’une vidéo responsive et pourquoi est-ce important ?

Une vidéo responsive est une vidéo qui s’adapte et redimensionne en fonction de la taille de l’écran sur lequel elle est visualisée, qu’il s’agisse d’un ordinateur de bureau, d’une tablette ou d’un smartphone. C’est important car cela assure une expérience utilisateur optimale, en évitant des vidéos tronquées ou un défilement horizontal.

2. Comment fonctionne l’attribut « Partager > intégrer » sur YouTube pour l’intégration de vidéos ?

L’option « Partager > intégrer » sur YouTube vous permet d’obtenir un code iframe que vous pouvez ensuite copier et coller sur votre site web pour intégrer la vidéo. Ce code contient généralement les attributs « height » et « width » qui déterminent la taille d’affichage de la vidéo. Vous pouvez voir mon article sur Faire un appel à l’action sur vos vidéos Youtube ici.

3. Quels sont les problèmes courants lorsqu’une vidéo n’est pas responsive ?

Lorsqu’une vidéo n’est pas responsive, elle peut ne pas s’afficher correctement sur tous les appareils. Par exemple, sur un écran plus petit, une partie de la vidéo pourrait être coupée, ou un ascenseur horizontal pourrait apparaître, rendant la navigation et la visualisation désagréables pour l’utilisateur.

4. Comment les attributs « height » et « width » affectent-ils l’affichage des vidéos sur différentes tailles d’écran ?

Les attributs « height » (hauteur) et « width » (largeur) définissent les dimensions d’affichage fixe de la vidéo. Si ces dimensions sont plus grandes que la largeur de l’écran de l’utilisateur, cela peut entraîner des problèmes d’affichage, comme le défilement horizontal ou la coupure de la vidéo.

5. Y a-t-il d’autres outils ou plugins recommandés pour rendre les vidéos responsives sur d’autres plateformes que YouTube ?

Oui, il existe d’autres outils et plugins pour rendre les vidéos responsives. Par exemple, pour les utilisateurs de WordPress, des plugins comme « FitVids » ou « TwicPics » peuvent aider à rendre les vidéos responsives. De plus, certaines plateformes d’hébergement vidéo, comme Vimeo, offrent également des options d’intégration responsive.

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 !

3 commentaires

  • Adelaide dit :

    Merci, cela fonctionne très bien !
    Cordialement

  • Bebop dit :

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

  • 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 ?

Laissez un commentaire