HTML5 Video Cover

[JonasLoerken]

Hey guys,

i integrated a HTML5 Video into my Website. The video should played on fullscreen (width: 100%; height: 100%;). In Safari my CSS seems to work, but in Firefox the Video ist cropped on the left and right side.
Doug you have any Solution?

My HTML:

<div class="index-video-wrapper">
<video autoplay loop poster="img/index-image.jpg" id="index-video">
<source src="vid/index-video.mp4" type="video/mp4">
</video>
</div>

My CSS:

#index-video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -100;
    right: 0;
    bottom: 0;
    background: url(../img/index-image.jpg) no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

.index-video-wrapper {
    height: 100%;
    width: 100%;
    background: url(../img/index-image.jpg) no-repeat center center;
    background-size: cover;
}

You may have a look on my website http://www.predatordesign.de/2015

[JonasLoerken]

I think “object-fit: cover” is responsible for the error.
Firefox does not use the attribute. Any solution?

[JonasLoerken]

Ok, Firefox 35 (current Version) does not support “object-fit”. Do you have any other solution to make the HTML 5 Video cover?

[Author]

Posts