Ajustement de la vidéo HTML5 à la taille de l'élément parent

I've got a

I would like the video element to also automatically resize so that it always remains contained within its background div; this sort-of-works if I set the video element's CSS height & width to 100%, so it's always the same size as its container. However, if the containing div's dimensions go below the video image's inherent videoWidth or videoHeight, then it starts to behave as though the CSS height/width properties refer to percentages of the video image's inherent dimensions, not the container div! E.g., if the CSS height is 100%, it scales normally except that it has a minimum size of the video's inherent height; if the CSS height is 50%, it scales normally but with a minimum size of 50% of the video's inherent height.

I can fix this, sort of, by using JavaScript to periodically reset the video element's height in pixels to be the computed height of the container, but this is really slow and choppy. Is there any way to fix this in CSS so that the video element will size properly?

4
Avez-vous un violon peut-être?
ajouté l'auteur jQuerybeast, source
@ LoganR.Kearsley, pour ma part, j’ai eu un moment dense et me suis égaré - mes excuses. J'ai proposé de rouvrir. Je ne sais pas pourquoi tous les autres ont accepté! Je pense toujours que c'est une dupe, mais tu as raison, ce n'est pas une dupe de celle que j'ai sélectionnée.
ajouté l'auteur totallyNotLizards, source
L'image vidéo est supposée être en boîte aux lettres à l'intérieur des limites de l'élément vidéo afin de conserver son rapport de format; l'élément vidéo lui-même est censé être assez gros comme bon vous semble, et cela fonctionne habituellement. J'ai finalement réussi à le faire fonctionner, mais la raison m'échappe; consultez le violon à l'adresse jsfiddle.net/gliese1337/Djbvj/20 . Si vous définissez la position de la vidéo sur "absolu", cela fonctionne. Si vous supprimez cette ligne du CSS, elle se comporte de manière inexplicable.
ajouté l'auteur Logan R. Kearsley, source
@ Jammypeach Euh, comment? Cela fait environ 10 minutes que je regarde ces deux questions et les réponses données sur la question affiche. Honnêtement, je ne comprends pas comment vous pourriez penser qu'elles sont identiques. Ce problème n'a rien à voir avec les images des affiches vidéo, ni avec la taille d'une vidéo. C'est un problème avec la vidéo, pas avec l'image vidéo, la mise à l'échelle des éléments étrangement.
ajouté l'auteur Logan R. Kearsley, source
Il semble que les proportions du conteneur ne correspondent pas aux proportions intrinsèques du contenu vidéo (lors du rendu, les proportions intrinsèques du contenu vidéo sont toujours préservées)
ajouté l'auteur ExpExc, source

2 Réponses

Je sais bien que la question est ancienne, mais je me suis toujours efforcé de réaliser une mise en page avec CSS, dans laquelle une vidéo est automatiquement dimensionnée pour correspondre à une boîte, généralement dans l'élément parent.

Le simple fait d'utiliser width et height avec un positionnement statique ne fonctionne que dans certaines configurations de topologies parent-enfant et dépend également beaucoup du style de la topologie. Même si vous obtenez un élément qui calcule correctement ses limites, une fois que vous insérez un élément vidéo en lecture, il étendra la boîte de dialogue autorisée aux parents, même s’il s’agit du comportement le moins sensé que vous attendiez.

Ajoutez quelques éléments fieldset et vous vous retrouverez dans le gouffre des spécificités CSS et du navigateur.

Ce que j’ai découvert, c’est qu’il était plus simple de sortir l’élément vidéo de son contexte de positionnement en utilisant position: absolute . Cela ne veut pas dire qu'il ne se comportera pas bien visuellement: l'utilisation de width: 100% et de height: 100% le contraint à se contraindre correctement comme il se doit (mais pas). Vous devrez ensuite ajouter position: relative à l'élément ancêtre approprié de l'élément video, sinon la vidéo sera positionnée de manière absolue par rapport à la racine du document, ce qui n'est probablement pas ce que vous souhaiteriez.

L'omission de left et de right fonctionne car le positionnement absolu ne réinitialise pas la position, mais commute simplement la méthode de calcul. Vous pouvez également définir les deux propriétés sur zéro, puis aligner votre vidéo sur le coin supérieur gauche du parent décalé. max-width et max-height ne sont pas nécessaires - je viens de les voir se lancer dans de nombreux cas où des personnes ont du mal à limiter leurs éléments vidéo - don ' pas la peine.

Vous pouvez spécifier la couleur d'arrière-plan pour l'élément vidéo ou son parent décalé. De cette façon, vous obtiendrez l'effet de la boîte aux lettres, par exemple des barres noires sur les côtés de la vidéo.

2
ajouté

Comme votre vidéo est dans un div , vous pouvez résoudre ce problème en définissant la largeur et la hauteur de la vidéo sur 100% . Cela fait que la vidéo occupe 100% de l'élément div .

Exemple de balisage:

<div id="video_container">
   

Feuille de style:

#video_container video {
    width: 100%;
    height: 100%;
}
1
ajouté
Que l'agent utilisateur préserve les proportions ou non, cela n'a rien à voir avec le problème - même en préservant les proportions, il est mathématiquement et autrement trivial de calculer la hauteur ou la largeur maximale, en fonction de la contrainte la plus applicable, et de calculer l'autre dimension. de sorte que ce rapport est correct. C’est ainsi que vous regardez des films format boîte aux lettres sur un écran 4: 3, ou inversement avec un contenu 4: 3 sur un téléviseur grand écran moderne, par exemple. Vous obtenez des barres noires. Avec video , cela serait possible avec la propriété background-color .
ajouté l'auteur amn, source
Je pense que le résultat est que le navigateur préserve toujours les proportions de la vidéo.
ajouté l'auteur mtyson, source
C'est exactement ce que j'ai fait en premier. C'est la chose évidente qui devrait fonctionner. Mais ce n'est pas (ou du moins, il n'y a pas 3 ans; cela pourrait ne plus être le cas, plusieurs versions de navigateur ultérieurement). Comme je l'ai dit dans la question: "si les dimensions de la div contante sont inférieures à la largeur vidéoWidth ou videoHeight inhérente à l'image vidéo, le comportement commence alors à se comporter comme si les propriétés CSS hauteur/largeur se référaient à des pourcentages des dimensions inhérentes à l'image vidéo, et non au conteneur ! " C'est le problème que je devais résoudre.
ajouté l'auteur Logan R. Kearsley, source