Alsacreations.com - Actualités - Archives (janvier 2015)
Les dernières actualités d'Alsacreations.com
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, vous l'aurez compris, jusque là 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 la même chose, sans avoir besoin d'un wrapper supplémentaire ni de code inutile.
Garder le ratio 16:9 d'images fullscreen en CSS
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, quelque 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
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 à partie 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().
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 :
| ratio d'image | valeur de height |
|---|---|
| 16/9 |
56.25vw |
| 16/10 |
62.5vw |
| 4/3 |
75vw |
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.