28172 sujets

CSS et mise en forme, CSS3

[Résolu] Adapter la taille d'une video à l'écran

Bonjour à tous,
Il y a t-il un moyen simple pour faire en sorte qu'une video s'adapte à la taille de l'écran ?
J'ai aujourd'hui le code suivant (qui marche très bien):
<iframe width="560" height="315" src="https://www.youtube.com/referencevideo" frameborder="0" allowfullscreen></iframe>
mais évidemment avec une largeur définie et donc non adaptable / écran ! Smiley ohwell
Un grand merci pour vos réponses et de joyeuses fêtes à tous Smiley roflol
Marina
Bonjour. Avec un max-width à 100% :
.maVideo {
  max-width: 100%;
  aspect-ratio: 16/9;
}

Voir ici par exemple : Players.
Modifié par Olivier C (28 Dec 2022 - 12:49)
Merci Olivier,
Ton exemple m'aide beaucoup.
Un petit détail :
Au dela d'une certaine valeur de largeur, disons 800, j'aimerai que ma video prenne 50% de la largeur (en partant bien de la gauche, enfin normal quoi). Et, en dessous de 800, appliquer le code que tu as précisé. Comment pourrais-je le formuler (si c'est possible...) ?
Oui c'est possible, on peut y arriver en définissant l'élément seul, sans besoin de passer par des media queries :
.maVideo {
  width: clamp(50%, 800px, 800px); /* minimum de 800px, au-delà la vidéo passe à 50% de la largeur de l'élément parent */
  max-width: 100%; /* cette règle reste pertinente car elle empèchera la vidéo de dépasser de l'élement parent, elle passera au-dessus de la définition de 800px si besoin */
  aspect-ratio: 16/9;
}

La démo : CodePen

Apparemment il serait aussi possible de le faire avec width: max(value1, value2), mais je ne suis pas arrivé à mettre en œuvre cette règle pour l'instant...
Modifié par Olivier C (30 Dec 2022 - 11:05)
Ah mais si : max() ça fonctionne ! C'est juste que j'avais un bug avec mon préprocesseur (Stylus) :
.maVideo {
  width: max(50%, 800px);
  max-width: 100%;
  aspect-ratio: 16/9;
}

Voilà voilà, c'est plus logique...
Si vous revenez par là pensez à mettre le topic en résolu.
Modifié par Olivier C (07 Jan 2023 - 10:15)
Prévenir un modérateur
Répondre au sujet
Aller à