CODEWITHSUNDEEP
javascripthtmlcsshtml5-video
heron
heron

Reputation: 3661

Strange HTML5 video issue

Please take a look at this fiddle http://jsfiddle.net/rwbcf/

If we have 16:9 display:

enter image description here

Problem occurs when we have display with aspect ratio other than 16:9.

You cansee big empty space at the bottom of video and as much we resize browser window (get width smaller) empty space grows more and more.

enter image description here

Is there any solution like scaling, or cropping and zooming to remove this empty space? I can't figure out. Thanks in advance

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 */
}

Upvotes: 2

Views: 1406

Answers (3)

Hasan Daghash
Hasan Daghash

Reputation: 1691

to remove the black space , video size should be as the container size so add this to your css:

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

Upvotes: 0

Pete Kozak
Pete Kozak

Reputation: 623

I have exactly the same issue, although the empty space appears above and underneath like in a panoramic movie - this is completely unwanted behavior.

Setting: video { object-fit: fill; }

works for me perfectly well!

Upvotes: 1

Fenton
Fenton

Reputation: 250922

The specification for the video element says that this should happen, it is the equivalent of the following CSS:

video { object-fit: contain; }

You can change this if you don't mind the aspect ratio being ignored:

video { object-fit: fill; }

Or if you want to effectively zoom in (preserve aspect ration, but crop portions)

video { object-fit: cover; }

You can check out browser support for the object-fit property.

Upvotes: 4

Related Questions