Créer une vidéo responsive pour votre site en CSS

Parfois nous aimerons ajuster notre design d’une manière qu’il soit compatible avec les différents appareils.
Dans ce tutoriel je vais vous présenter une technique qui vous permettra de rendre l’affichage d’une vidéo responsive, afin de l’adapter aux différentes résolutions d’écrans.

Décortiquant d’abord le problème

Je vais utiliser le code d’intégration ci-dessous d’une vidéo fournie par youtube:

Si vous intégrer ce code dans une page html, en redimensionnant la taille de la page, éventuellement vous attendez à une vidéo qui s’adapte à la résolution des différents écrans, malheureusement ce n’est pas le cas, car notre vidéo garde des dimensions fixes: 560 px de largeur et 315 px de hauteur indépendamment de navigateur et de la taille de l’écran.

Essayons de voir le rendu de cette vidéo.

Démo

Dans le cas d’une image ou d’une vidéo intégré en HTML5, la portion de code CSS ci-dessous peut régler facilement le problème :

Si vous essayez le code ci-dessous pour notre vidéo, vous allez remarquez qu’elle s’adapte à la taille de l’écran seulement en largeur mais la hauteur ne suit pas le ratio. On peut régler ce problème facilement en utilisant uniquement le CSS.

Solution

La première étape consiste à envelopper notre iframe dans une balise div à la quelle j’ai ajouté la classe video-container.

Voici le contenu de la classe vidéo-container à ajouter dans le fichier CSS :

On a définit pour la classe vidéo-container un positionnement relatif pour positionner l’iframe par rapport à la balise div. l’iframe qui contient notre vidéo est à l’intérieur de la balise div , je veux avoir le format 16:9 pour la vidéo, ce que veut dire la largeur de l’écran vaut les seize neuvièmes de sa hauteur c’est à dire 56.25%. C’est pourquoi on a définit le padding-bottom à cette valeur qu’on a calculé en divisant 16 par 9.

Maintenant nous allons cibler la balise iframe, on veut la positionner dans l’angle gauche de notre conteneur (notre balise div), d’où on a lui donné une position absolu, avec un top et un left égale à zéro. En plus on veut quelle prend tout l’espace de conteneur en largeur et en hauteur c’est pourquoi on a employé un width et un height de 100%.

Essayer de voir le résultat:

Démo

Nous avons maintenant une vidéo responsive qui s’adapte aux différentes résolutions d’écran qu’on a crée en employant seulement le CSS à travers une simple thechnique qui’est facile à implimenter.

Vous aimerez aussi ...

Laisser un commentaire

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