Conserver le ratio 16/9 des images fullscreen et vidéos

Jusqu'il y a quelques temps, si vous vouliez utiliser des images en CSS ou des vidéos en iframe qui gardaient leur joli ratio 16:9 et prennaient toute la taille du navigateur quand on redimensionne, il fallait passer par le bon vieux hack du "ajoute un wrapper autour et colles lui un padding-bottom de 56.25%".
Rien de plus simple et logique, n'est-ce pas ? Tellement simple et logique que certains en ont fait un plugin de redimension automatique de vidéo ou un site pour hacker automatiquement les inclusions d'iframes. Bref, c'est de la bidouille à base de gros coups de hack, de wrapper et autres joyeusetés.

Avec l'arrivée des unités de viewport, compatibles depuis IE9, nous allons pouvoir faire des choses assez sympathiques. 

Garder le ratio 16:9 d'images fullscreen en CSS 

Attention, ce qui suit est du code expérimental avec des unités de viewport, pour le moment ce n'est pas supporté partout et et à utiliser uniquement si vous souhaitez une image fullscreen. Les images ne s'aggrandissent pas si l'utilisateur zoom. A utiliser en connaissance de cause.
Ceci n'est PAS une technique de gestion de débordement d'images dans un container.

Le but est ici de faire en sorte que l'image de fond que l'on aura placée en CSS conserve son ratio de 16/9 et prenne toute la taille du navigateur, quelle que soit la taille de ce dernier (aka fullscreen). Pratique quand on fait du responsive.

Voici le code utilisé : 

.ratio {
    background: url("monimage.jpg") no-repeat;
    background-size: cover;
    width: 100vw;  
    height: 56.25vw;
}  

Concrètement ce que l'on fait : 

• on donne à l'image la largeur du navigateur grâce à l'unite vw (viewport-width)
• on lui donne la hauteur à laquelle on a appliqué un ratio 16:9  calculé en faisant 100 * 9 / 16 de la largeur du navigateur

Voir le résultat en ligne

Garder le ratio 16:9 des vidéos en CSS

Le second cas d'utilisation est celui des vidéos.
Un iframe est plutôt flexible au final, donc on pourrait se dire que pour le redimensioner sur mobile, il suffirait d'y appliquer le même bon vieux hack que pour le débordement d'images, le désormais célèbre max-width:100%.

En théorie oui, en pratique, on perd le ratio de notre vidéo et ça nous donne un résultat pas super sympa comme ceci :

C'est là où encore une fois, mes unités de viewport et mon ratio viennent à la rescousse. 

Voici le code utilisé : 

@video-width: 780px;

iframe {  
  width: 100vw; 
  max-width: @video-width;
  height: 56.25vw;    
}

@media (min-width:@video-width) {
  iframe {
    height: calc(@video-width * 0.5628205128205128);
  }
}

Là, c'est un poil plus compliqué, parce que j'ai ajouté un peu de préprocesseur LESS pour rendre le tout plus flexible. Voici l'explication en français dans le texte : 

• on définit une variable qui va contenir la taille que je souhaite donner à la vidéo (encore une fois, pas obligatoire, c'est juste pour aller plus vite)
• on donne à mon iframe une largeur maximale de la taille de ma vidéo (ici 780px)
• on applique le même code pour la hauteur que pour les images avec mon ratio 16:9
• l'astuce ici, si la taille du navigateur est plus grande ou égale à la taille de ma vidéo, on donne à la vidéo une hauteur fixe calculée à partir de sa propre largeur affichée à laquelle on a encore une fois appliqué le ratio (donc 780 * 9 / 16). Ceci en employant la fonction calc().

Voir le résultat en ligne

Et si mon ratio n'est pas de 16/9 ?

Ah ben oui mais si vous ne faites pas comme tout le monde on n'y peut rien ! Plus sérieusement, il suffit tout simplement d'adapter la valeur de height selon la valeur de votre ratio.

Concrètement cela donne ceci :

Pour finir, je vous renvoie au support de viewport units, mais en résumé, ça marche plutôt pas mal depuis IE9.

Vous pouvez également jeter un oeil à un précédent article Une vidéo en arrière plan sur toute la page.