Vidéos de conception de sites Web réactifs

Utilisation de la propriété width

Si la width propriété est définie sur 100 %, le lecteur vidéo sera réactif et augmentera et diminuera :

Notez que dans l’exemple ci-dessus, le lecteur vidéo peut être agrandi pour être plus grand que sa taille d’origine. Une meilleure solution, dans de nombreux cas, sera d’utiliser le
max-width propriété à la place.

Utilisation de la propriété max-width

Si la max-width est définie sur 100 %, le lecteur vidéo se réduira s’il le faut, mais ne sera jamais agrandi pour être plus grand que sa taille d’origine :

Ajouter une vidéo à l’exemple de page Web

Nous voulons ajouter une vidéo dans notre exemple de page Web. La vidéo sera redimensionnée pour toujours occuper tout l’espace disponible :