Faire en sorte que l'affiche de la vidéo HTML5 ait la même taille que la vidéo elle-même

Question

Quelqu'un sait-il comment redimensionner le poster vidéo HTML5 de manière à ce qu'il corresponde aux dimensions exactes de la vidéo elle-même ?

Voici une jsfiddle qui montre le problème : http://jsfiddle.net/zPacg/7/

voici ce code :

HTML :

<video controls width="100%" height="100%"  poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png">
  <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.ogg" type="video/ogg" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webm" />
</video>

CSS :

video{
border:1px solid red;
}

Remarquez que le rectangle orange ne s'adapte pas à la bordure rouge de la vidéo.

De plus, l'ajout du CSS ci-dessous ne fonctionne pas non plus car il redimensionne la vidéo en même temps que l'affiche :

video[poster]{
height:100%;
width:100%;
}

Answer 1

En fonction des navigateurs que vous ciblez, vous pouvez opter pour le modèle adapté à l'objet pour résoudre ce problème :

object-fit: cover;

ou peut-être fill est ce que vous recherchez. Toujours à l'étude pour l'IE .

Answer 2

Vous pouvez utiliser une image d'affiche transparente en combinaison avec une image d'arrière-plan CSS pour obtenir ce résultat ( exemple ) ; cependant, pour avoir un arrière-plan étiré à la hauteur et à la largeur d'une vidéo, vous devrez utiliser une position absolue <img> étiquette ( exemple ).

Il est également possible de set background-size a 100% 100% en les navigateurs qui prennent en charge background-size ( exemple ).

---

Mise à jour

Une meilleure façon de procéder consisterait à utiliser la fonction object-fit propriété CSS comme le suggère @Lars Ericsson.

Utilisez

object-fit: cover;

si vous ne voulez pas afficher les parties de l'image qui ne correspondent pas au format de la vidéo, et

object-fit: fill;

pour étirer l'image afin de l'adapter au format de votre vidéo

Exemple

Answer 3

Ou vous pouvez utiliser simplement preload="none" pour rendre le fond VIDEO visible. Et vous pouvez utiliser background-size: cover; ici.

 video {
   background: transparent url('video-image.jpg') 50% 50% / cover no-repeat ;
 }

 <video preload="none" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
 </video>

Answer 4

J'ai essayé toutes les solutions possibles, mais la solution que j'ai retenue est une suggestion de l'inspecteur de Google Chrome. Si vous ajoutez ceci à votre CSS, cela a fonctionné pour moi :

video{
   object-fit: inherit;
}

Answer 5

Ma solution combine les réponses de l'utilisateur2428118 et de Veiko Jääger, permettant le préchargement mais sans exiger une image transparente séparée. Nous utilisons une image transparente de 1px encodée en base64 à la place.

<style type="text/css" >
    video{
        background: transparent url("poster.jpg") 50% 50% / cover no-repeat ;
    }
</style>
<video controls poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" >
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>