Conception Web Responsive - Vidéos
Utilisation de la propriété width
Si la propriété width est définie à 100 %, le lecteur vidéo sera réactif et s'ajustera :
Exemple
video {
width: 100%;
height: auto;
} Remarquez que dans l'exemple ci-dessus, le lecteur vidéo peut être agrandi pour dépasser sa taille d'origine. Une meilleure solution, dans de nombreux cas, sera d'utiliser la propriété max-width à la place.
Utilisation de la propriété max-width
Si la propriété max-width est définie à 100 %, le lecteur vidéo se réduira si nécessaire, mais ne s'agrandira jamais pour dépasser sa taille d'origine :
Exemple
video {
max-width: 100%;
height: auto;
} Ajouter une vidéo à la page Web d'exemple
Nous voulons ajouter une vidéo à notre page Web d'exemple. La vidéo sera redimensionnée pour toujours occuper tout l'espace disponible :
Exemple
video {
width: 100%;
height: auto;
}