javascript - Adapter la vidéo HTML5 à la taille de l'élément parent

J'ai un élément <video> à l'intérieur d'un <div> qui est automatiquement redimensionné lorsque d'autres éléments de la page sont redimensionnés/ajoutés/supprimés dynamiquement.

Je voudrais que l'élément vidéo redimensionne également automatiquement afin qu'il reste toujours contenu dans sa div de fond ; cela fonctionne en quelque sorte si je définis la hauteur et la largeur CSS de l'élément vidéo à 100 %, de sorte qu'il ait toujours la même taille que son conteneur. Cependant, si les dimensions de la div contenant passent en dessous de la largeur ou de la hauteur intrinsèque de la vidéo, alors il commence à se comporter comme si les propriétés CSS de hauteur/largeur se référaient à des pourcentages des dimensions intrinsèques de la vidéo, et non de la div conteneur ! Par exemple, si la hauteur CSS est de 100 %, elle se redimensionne normalement sauf qu'il y a une taille minimale correspondant à la hauteur intrinsèque de la vidéo ; si la hauteur CSS est de 50 %, elle se redimensionne normalement mais avec une taille minimale correspondant à 50 % de la hauteur intrinsèque de la vidéo.

Je peux résoudre cela, en quelque sorte, en utilisant JavaScript pour réinitialiser périodiquement la hauteur de l'élément vidéo en pixels afin qu'elle corresponde à la hauteur calculée du conteneur, mais c'est vraiment lent et saccadé. Y a-t-il un moyen de résoudre cela en CSS afin que l'élément vidéo s'ajuste correctement ?

Réponse n°1

Je suis bien conscient qu'il s'agit d'une question ancienne, mais j'ai eu du mal à réaliser une mise en page avec CSS où une vidéo est automatiquement dimensionnée pour s'adapter à un certain bloc, généralement à l'intérieur d'un élément parent.

L'utilisation de width et height avec un positionnement statique ne fonctionne que dans certaines configurations de topologies parent-enfant, et dépend aussi beaucoup de la façon dont la topologie est stylisée. Même si vous parvenez à faire calculer correctement les limites d'un élément, une fois que vous y mettez un élément vidéo en lecture, il agrandira la boîte autorisée du parent, même si c'est le comportement le moins logique auquel vous vous attendriez.

Ajoutez quelques éléments fieldset, et vous êtes dans le terrier du CSS et des particularités des navigateurs.

Ce que j'ai découvert, c'est qu'il était plus facile de simplement sortir l'élément vidéo de son contexte de positionnement, en utilisant position: absolute. Cela ne signifie pas qu'il ne se comportera pas correctement visuellement -- utiliser width: 100% et height: 100% le contraint effectivement correctement comme il le devrait normalement (mais le ferait pas autrement). Il vous faudrait ensuite ajouter position: relative à l'élément ancêtre approprié de l'élément vidéo, sinon la vidéo sera positionnée de manière absolue par rapport à la racine du document, ce qui n'est très probablement pas ce que vous souhaitez.

Omettre left et right fonctionne parce que le positionnement absolu ne réinitialise pas la position, il change juste la méthode de calcul. Vous pourriez alternativement définir les deux propriétés à zéro, vous obtiendriez alors votre vidéo alignée au coin supérieur gauche de l’élément parent de décalage. max-width et max-height sont inutiles -- j’ai juste remarqué que ces propriétés sont souvent ajoutées dans de nombreux cas où les gens ont du mal à contraindre leurs éléments vidéo -- ne vous embêtez pas.

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

Réponse n°2

Comme votre video se trouve dans un div, cela peut être résolu en définissant à la fois la largeur et la hauteur de la vidéo à 100%. Cela permet à la vidéo d'occuper 100 % de l'élément div.

Exemple de balisage :

<div id="video_container">
   <video></video>
</div>

Feuille de style :

#video_container video {
    width: 100%;
    height: 100%;
}