Conception de page web réactive - Vidéos

Utiliser la propriété width

Si width Si la propriété est définie à 100%, le lecteur vidéo répondra et agrandira ou réduira :

Exemple

video {
  width: 100%;
  height: auto;
}

Essayer par vous-même

Veuillez noter que dans l'exemple ci-dessus, le lecteur vidéo peut être agrandi au-delà de sa taille d'origine. Dans de nombreux cas, une meilleure solution consiste à utiliser la propriété max-width.

Utiliser la propriété max-width

Si l'on max-width Si la propriété est définie à 100%, le lecteur vidéo sera rétréci proportionnellement, mais ne dépassera jamais sa taille d'origine :

Exemple

video {
  max-width: 100%;
  height: auto;
}

Essayer par vous-même

Ajouter une vidéo à la page d'exemple

Nous souhaitons ajouter une vidéo à la page d'exemple. La vidéo sera redimensionnée pour occuper toujours tout l'espace disponible :

Exemple

video {
  width: 100%;
  height: auto;
}

Essayer par vous-même