problème vidéo HTML5 étrange

Question

S'il vous plaît jeter un oeil à ce violon http://jsfiddle.net/rwbcf/

Si nous avons 16: 9:

problème se produit lorsque nous avons affichage avec un rapport d'aspect autre que 16: 9 .

Vous pouvez laisser un grand espace vide en bas de la vidéo et tant que nous redimensionnons la fenêtre du navigateur (obtenir une largeur plus petite), l'espace vide se développe de plus en plus.

est-il une solution comme mise à l'échelle, ou le recadrage et le zoom pour supprimer cet espace vide? Je ne peux pas comprendre. Merci à l'avance

HTML

<div id="video-viewport"> 

     <video id="bg" autoplay loop preload="none" tabindex="0"> 

      <source src="http://goo.gl/MkY4i" type="video/mp4" /> 

     </video> 
</div> 

CSS

html, body { 
    min-width:100%; 
    background:#000; 
    overflow:hidden; 
} 

body{ 
    margin: 0; 
    padding: 0 ; 
} 
#bg { 
    width:100%; 
    height:auto; 
} 

#video-viewport { 
    overflow: hidden; 
    width:100%; 
    height:100%;  
    z-index: -1; /* for accessing the video by click */ 
} 

Answer 1

La spécification de l'élément vidéo dit que cela devait se produire, il est l'équivalent du CSS suivant:

video { object-fit: contain; } 

Vous pouvez changer cela si cela ne vous dérange pas le rapport d'aspect étant ignoré:

video { object-fit: fill; } 

Ou si vous voulez zoomer efficacement (préserver la ration d'aspect, mais les portions de culture)

video { object-fit: cover; } 

Vous pouvez check out browser support for the object-fit property.

Answer 2

J'ai exactement le même problème, bien que l'espace vide apparaisse au-dessus et en dessous comme dans un film panoramique - c'est un comportement complètement indésirable.

Réglage: vidéo {object-fit: fill; }

fonctionne parfaitement bien pour moi!

Answer 3

pour supprimer l'espace noir, taille de la vidéo devrait être la taille du conteneur afin d'ajouter ceci à votre css:

#video-viewport { 
    width:inherit; 
    height:inherit;  
}