Comment transformer vos vidéos en « responsive » ?

Comment transformer vos vidéos en « responsive » ?

Découvrez le snippet (« bout de code ») pour rendre vos vidéos responsive, afin qu’elles s’adaptent à la taille du navigateur, même sur un smartphone!

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" height="286" width="509" allowfullscreen="" frameborder="0"></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" height="286" width="509" allowfullscreen="" frameborder="0"></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).

La source

Ce code n’est pas de moi, je l’ai trouvé sur ce site absolument fabuleux pour ces nombreux snippets CSS à appliquer avec de simple copier-coller: CSS-TRICKS. Il provient précisément de Fluid Width Video, un article qui présente de nombreuses solutions HTML/CSS mais aussi JavaScript pour rendre vos vidéos responsive (an anglais).

CSS, HTML, vidéo, webmaster

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

32 commentaires

  1. Bonjour MarieEve
    Quel bon article et très utile, une fois de plus ! Et ce sont des choses que l’on voit rarement, et dont à ma connaissance on ne parle pas dans les formations au blogging…
    Donc si j’ai bien compris, il suffit de transformer le code html de la video de base en celui que tu donnes dans le paragraphe « Le code » ?
    Belle journée à toi
    Marjorie

    Répondre
    • Bonjour Marjorie,

      Oui c’est bien cela :) Bonne journée!

      Répondre
      • Bonjour
        Merci pour cet article.
        J’ai quelques vidéo en 4/3 et suivant votre commentaire le padding est adapté au 16/9.(padding-bottom: 56.25%; /* 16:9 */)
        Je ne comprends pas d’où vient ce 56.25% et par conséquent je ne sais pas calculer pour du 4/3
        Merci

  2. Attention, le responsive doit permettre aux internautes sur smartphone ou tablette de lire la vidéo, le player doit fonctionner en HTML5 pour que ce soit utile. Avec les snippets Youtube ou Dailymotion, pas de soucis c’est déjà codé, mais le problème est inévitable pour tous les players maison / anciens, codés en flash !

    Répondre
    • Bonjour,
      Je viens même de découvrir que si on coche la case « interdire l’intégration » dans la page d’admin d’une vidéo youtube, celle-ci ne devient plus visionnable sur les appareils nomades Apple (pas de flash). A surveiller aussi!

      Répondre
      • Le « flash », est une approche qui est soumit a contre verse par les temps qui cours, ceci depuis l’arrivée des smartphones, des guerres Apple/Adobe/Google, de l’abandon de se format par google, etc… etc..

        Pas débat ici sur le bien ou pas… simplement le constat du moment et la vision de demain.

        Oui HTML5 apporte « normalement » une réponse au problème, même si tout les navigateurs ordinateur pure ou smartphone ne s’entendent pas…

        Actuellement, la solution HTML5 répond a tout les cas de figure, mais implique un mlultiformat des vidéos.

        Il faut du MP4, du Ogg, du WebM et pour l’éternel IE ou autre Navigosaures du Flash…

        En se qui vous concerne (les blog, wordpress?) il doit exister des plugin qui géré sans problème se genre de chose, au pire c’est tout simple a en créer un…

        ne pas se rendre compatible HTML5 c’est perdre a terme quelques visiteurs…

        Par contre pour les vidéos hebergée sur Youtube ou consort, tout n’est pas encore en place (http://goo.gl/6cLes) mais ca vient !

        Dependre d’un hebergement externe pour vos vidéos a ses contraintes :( en attendant une vraie normalisation…

    • 9 divisé par 16 multiplié par 100 = 56,25%

      Répondre
  3. Bonjour MarieEve,

    Merci pour cet article, bien pratique et comme le souligne Majorie, le sujet est pas très connu sur internet.

    C’est comme même plus agréable de visionner la capture d’une vidéo à la bonne taille, au lieu de se retrouver a scroller.

    Bon dimanche
    Cédric

    Répondre
  4. Ah super ça Marie-Eve, c’est un petit bout de code qui va en aider plus d’un !
    Merci !

    Et continue comme ça 😉

    Bonnes fêtes à tous et à toutes ! Amusez-vous bien ce soir !

    Répondre
  5. Bonjour Marie Eve, out d’abord je vous souhaite une très bonne année 2013, cependant, ça m’a l’air très intéressant tout ca, je vais aller voir de plus prés, J’ai gagné 4 heures de recherches et études sur le sujet en lisant cet article, il est très complet merci encore une fois.

    Répondre
    • Bonjour Sylvie,

      Bonne année à vous aussi! :)

      Répondre
  6. Énorme le boulot fourni, un grand merci et félicitation Marie Eve, C’est effectivement dommage pour la créativité qui en prends un coup sur pas mal de projet, due aux contraintes sur responsive, par contre j’en es une question: J’ai une question : si le site est développé en responsive design pour tablette et mobile, est-il intéressant de compléter par une application tablette si les contenus sont les mêmes ?

    Répondre
    • Bonjour frédéric,

      Si le contenu est le même et que votre design est responsive, alors il existe peu d’intérêt à développer une application tablette ou smartphone (c’est d’ailleurs le but de ces techniques « adaptatives »: éviter d’avoir plusieurs applications pour le même contenu).

      Personnellement, je suis contre cette mode des applications…cela créé trop de différence entre les appareils et empêche de passer facilement d’un Android à un iphone (par exemple), ou d’un ipad à une galaxi tab. Je préfère miser sur les applications web (disponibles via un navigateur) et fuit comme la peste les applications (sauf des appli de jeux ou des utilitaires, comme une bousole, un miroir etc…).

      Bonne année 2013! :)

      Répondre
      • Ho ! que je suis d’accord avec toi !!

        l’avenir va dans ce sens…

      • il faudrait que les entreprises s’en rendent compte…et pas que les dev!

  7. Génial! J’en avait entendu parlé mais seulement pour les emails!

    Répondre
    • Comment ça pour les emails ? Des emails responsives ? Ch’comprends pô…

      Répondre
      • Oui des E-Mail a reponse automatique :)
        ok je sort …

  8. Bonjour à vous je vous souhaite mes meilleurs vœux  pour cette année 2013 ! Mais c’est vraiment un excellent article. Grâce à tes conseils j’ai pu atteindre tous mes objectifs beaucoup plus simplement et en un temps record également (il est vraiment bien détaillé cet article), C’est vraiment pratique…

    Répondre
    • Bonjour Emmanuel,

      Tant mieux si l’article vous a aidé autant :) Bonne année à vous aussi!

      Répondre
  9. Comme d’habitude des astuces très pertinents. Je pense que cette astuces sera très utile aux webamsters surtout que les patrons commencent à comprendre l’importance des vidéos pour communiquer plus aisément avec leur communauté.

    Répondre
  10. Merci je ne connaissais pas encore cette astuce.

    Avez-vous déjà eu l’occasion de la tester sur un de vos sites ?

    et qu’en est-il de la compatibilité avec les navigateurs ?

    merci

    Répondre
    • Bonjour,
      Je l’ai mis en place sur le site d’un client il y a moins d’une semaine (il n’est pas encore en ligne). Nous l’avons testé sur Firefox, Chrome et IE9 sur PC et sur Firefox et Safari sur Mac. Egalement sur l’iphone. Le code fonctionne bien sauf sur IE8 sur PC.

      Répondre
      • Très bonne question, penses-tu Marie qu’avec les navigateurs Android il n’y a aucun soucis, car c’est ce que j’utilise essentiellement.

        Merci 😉

      • Salut Benjamin,

        Je ne sais pas, je n’ai pas d’Android… :/

        Tu ne le sais peut-être pas, mais je n’aime pas qu’on m’appelle Marie… laissons mon prénom en entier! 😉

      • Totalement désolé MarieEve ^^, c’est vraiment involontaire de ma part.

        D’accord, bah écoute, dès que je peux tester avec Android dit le moi, et comme ça tu seras si ça fonctionne bien 😉

      • Pas de soucis 😉

        Merci pour le test, je te préviendrais quand le site sera en ligne! A++!

  11. meilleurs voeux Marie Eve. je parcours souvent votre blog et je trouve vos billets très pertinents ainsi que les astuces partagés.
    merci beaucoup et bonne continuation.

    Répondre
  12. Le responsive design, c’est l’avenir mais on marche encore sur des oeufs !

    Merci pour cette astuce sur les vidéos.

    Répondre
    • ou des omelettes quand les OS s’y mettent… cf Windows 8 et son interface « a la » « cette fois ca passera partout »

      Répondre
      • « cette fois ca passera partout » mdr ça passe partout sauf sur mon PC! 😉

Trackbacks/Pingbacks

  1. Comment insérer une vidéo responsive ? - Les Doigts dans le Net | Quand la communication passe au web | Scoop.it - [...] Découvrez le snippet ("bout de code") pour rendre vos vidéos responsive, afin qu'elles s'adaptent à la taille du navigateur,…
  2. Paul-André Gagnon (l3barb11) | Pearltrees - [...] Comment insérer une vidéo responsive ? [...]

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint