Derniers tutoriels de développement web
 

Responsive Web Design - Vidéos


Utilisation de la propriété width

Si la width propriété est définie à 100%, le lecteur vidéo sera sensible et l' échelle de haut en bas:

Exemple

video {
    width: 100%;
    height: auto;
}
Essayez - le vous - même »

Notez que dans l'exemple ci-dessus, le lecteur vidéo peut être mis à l'échelle pour être plus grande que sa taille d'origine. Une meilleure solution, dans de nombreux cas, sera d'utiliser le max-width propriété au lieu.


Utilisation de la propriété max-width

Si le max-width propriété est définie à 100%, le lecteur vidéo réduire si elle doit, mais jamais évoluer jusqu'à être plus grande que sa taille d' origine:

Exemple

video {
    max-width: 100%;
    height: auto;
}
Essayez - le vous - même »

Ajouter une vidéo à la page Web Exemple

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

Exemple

video {
    width: 100%;
    height: auto;
}
Essayez - le vous - même »