Responsive design : Redimensionner des vidéos en conservant le ratio

Dans le cadre d’un design responsive, un problème se pose quand on utilise des éléments à largeur fixe. Ce problème, c’est que si le design est vraiment trop réduit, ces éléments risquent de dépasser, ce qui est très moche… En ce qui concerne les images, nous avons vu comment résoudre ce léger soucis mais au niveau des vidéos, c’est tout de suite plus sensible.

L’élément video

Si vous utilisez l’élément video issu de HTML5, vous allez être heureux puisque rendre responsive un tel élément est très facile. En effet, si vous souhaitez redimensionner un élément video sans altérer son ratio, la façon de faire est la même que pour une image : on redimensionne la largeur comme on le souhaite avec width, min-width ou max-width (le plus souvent on utilise ce dernier avec une valeur de 100%) et on indique une hauteur automatique afin que le ratio soit adapté automatiquement.

video {
	max-width: 100%;
	height: auto;
}

Les autres

Mais le problème, c’est que tout le monde est encore loin d’utiliser l’élément video. Actuellement, un élément très utilisé, notamment par YouTube, est l’iframe. Sachez qu’il existe des méthodes pour rendre responsive des iframe provenant de YouTube uniquement en CSS, des méthodes que nous verrons peut-être plus tard mais qui ne nous intéressent pas ici. En effet, celles-ci ont l’inconvénient de ne fonctionner que pour YouTube ou d’autres lecteurs très similaires et ne sont donc pas forcément pratiques (on peut les adapter mais il faut faire une adaptation par type de lecteur, ce qui est assez lourd).

C’est pourquoi nous allons voir ici une méthode qui fonctionnera pour tous les lecteurs, grâce au JavaScript. J’ai choisi de vous montrer les exemples de code avec jQuery mais ces codes seront bien entendu expliqués dans leur totalité, c’est pourquoi vous ne devriez avoir aucun soucis à les adapter.

Pour commencer, nous allons créer une fonction qui va s’occuper de redimensionner nos éléments, une fonction qui sera exécutée une première fois au chargement de la page. C’est dans cette fonction uniquement que tout va se passer.

$(document).ready(redimensionnerVideos);

function redimensionnerVideos() {
}

On va donc récupérer tous les éléments à redimensionner et exécuter une fonction sur chacun d’entre eux. Ici, je récupère seulement les iframe mais vous pouvez adapter la liste à vos besoins.

function redimensionnerVideos() {
	$('iframe').each(function() {
			var elt = $(this);
		});
}

Pour ceux qui ne sont pas habitués à jQuery, le $(this) sert juste à transformer l’élément courant en objet jQuery afin de pouvoir utiliser les méthodes de la librairie. Nous allons ensuite calculer le ratio représenté par la largeur divisée par la hauteur. Ce ratio nous servira à redimensionner l’élément sans le déformer : on indique la largeur voulue et on calcule la hauteur en conséquence.

Il nous reste donc à déterminer cette largeur. Deux cas s’offrent à nous : utiliser la largeur du conteneur ou utiliser une largeur fixe (indiquée dans l’attribut width dans le cas des iframe). Pourquoi utiliser une largeur fixe ? Vous vous dites peut-être que c’est débile et ça l’est effectivement si le conteneur est plus petit que la vidéo… Sauf que si le conteneur est plus grand, la vidéo sera agrandie. Aussi, si vous ne souhaitez pas que votre vidéo ait une largeur de 100% tout le temps, il faudra passer par là.

Nous allons donc définir cette largeur fixe qui nous servira de limite. Définissez cette limite comme bon vous semble (dans le cas d’iframe, j’utiliserai l’attribut width). La largeur que l’on donnera à notre élément sera donc soit celle du conteneur, soit cette limite et le choix est simple : on prend la plus petite des deux. Il ne nous reste donc plus qu’à appliquer cette largeur à notre élément et à appliquer la hauteur calculée en fonction de cette largeur et du ratio précédemment calculé.

function redimensionnerVideos() {
	$('iframe').each(function() {
			var elt = $(this);
			var ratio = elt.width() / elt.height();
			var limite = parseInt(elt.attr('width'));
			var largeur = Math.min(elt.parent().width(), limite);
			video.width(largeur).height(largeur / ratio);
		});
}

Et voila ! Bien sûr, les différentes étapes ont été séparées en autant de lignes différentes, mais rien ne vous empêche de tout regrouper et ainsi éviter d’utiliser autant de variables : le seul intérêt de tout séparer est un soucis de clarté.

Pour finir, n’oubliez pas d’utiliser l’événement resize de la fenêtre pour utiliser votre fonction à chaque redimensionnement de la fenêtre de l’utilisateur.

$(window).resize(redimensionnerVideos);