fullscreen responsive video player

Question

I’m currently working on a site that shows a fullscreen video using vimeo’s player api. problem is, depending on the browser window dimensions I get black bars, clearly because of the discrepancy between the window and video ratios.

I’ve tried quite a few css and js combinations, including but not restricted to the usual go to solution for responsive videos, fitvids, but all to no avail.

my question is, then: is a fullscreen responsive video with vimeo’s embedded player possible or is it better to drop that and build a custom player myself, using vimeo only for hosting the video files?

in case it helps, here’s the relevant code:

HTML

<div id="video”>
    <div id="video-container">
        <iframe id="main-video" src="//player.vimeo.com/video/123456789?portrait=0&title=0&badge=0&byline=0&autoplay=1&color=333&api=1&player_id=main-video" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
</div>

CSS

#video {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#video-container {
    position: fixed; 
    min-width: 100%; 
    min-height: 100%;
}


#main-video {
     position: fixed; 
     min-width: 100%; 
     min-height: 100%;
}

thanks in advance!

Answer 1

I don't think there is a way you can do this with css alone just yet (object-fit will probably work when it's implemented in other browsers). I'm not even sure that will work with our iframe anyway.

I think no matter which option you go with, you'll have to know the aspect ratio of the video and explicitly set the size to be larger than the window, and set the positioning to center it.