Contenu multimédia & Responsive design

Si vous travaillez régulièrement sur des sites web utilisant du contenu multimédia (comprenez images et vidéos), vous avez obligatoirement été confronté à la problématique de redimensionnement des éléments que vous affichez. Et l’arrivée du responsive design n’a pas arrangé les choses.

Les images

La solution concernant les images est relativement simple puisqu’elle tient en une seule ligne de CSS grâce à la propriété « max-width » qui fixera la largeur maximale de l’élément concerné (en l’occurrence l’image) à la largeur de son parent (ci-dessous le paragraphe).

p img {
    max-width: 100%;
}

On pourrait songer à appliquer le même principe sur une vidéo et techniquement parlant ce n’est pas faux, malheureusement cela aura une incidence sur la présence d’éventuelles bords noirs supplémentaires sur la vidéo car la taille du lecteur ne sera plus adaptée au ratio de la vidéo affichée.

Les vidéos

Les plus ingénieux penseront immédiatement à une solution en JavaScript pour adapter dynamiquement la hauteur de la vidéo à la largeur occupée, mais il existe une technique full CSS relativement simple pour palier à ce problème : le padding ! En effet, si on créé un élément conteneur pour la vidéo est qu’on y applique un padding-bottom correspondant au ratio de la vidéo (56,25% pour du 16:9), on obtient une vidéo qui se comportera de façon parfaitement responsive.

.video-container {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
    background: #000000;
}

    .video-container iframe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

L’exemple ci-dessus fonctionne pour les vidéos YouTube qui utilisent des iframes, mais on peut utiliser la même technique pour les sites qui incrustent leurs vidéos dans des balises de type « object » ou « embedded ».

Facebooktwitterlinkedinmail

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.