Conception Web Responsive - Vidéos
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 :
Exemple
video {
width: 100%;
height: auto;
}
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, consistera à utiliser la
max-width
propriété à la place.
Utilisation de la propriété max-width
Si la max-width
propriété 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 :
Exemple
video {
max-width: 100%;
height: auto;
}
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 :
Exemple
video {
width: 100%;
height: auto;
}