Show a video-tag maximized and centered in a div

Question

I want to show a video by video html5 tag in a fixed div. I maximize it by using min-height and max-height. But I also want it to be centered.

<div class="fixed-width-height">
    <video style="min-width:100%; min-height:100%;" controls autoplay>
        <source src="myvid.mpg" type="video/mp4">
        Your browser does not support the video tag
    </video>
</div>

Right now, the div always shows the upper / or left part of the video depending on the size of the div. It would be best it always shows the center.

UPDATE: The video tag is now centered, great work of jbutler483 but there is a problem with the video size depending on the framing div or the video ratio or size. The video doesn't cover the whole area or the centering fails. Here is a snipped that does fit the needs on a 400x400 box but fails at 1000x200. http://jsfiddle.net/cremers/7Lgfyg1d/6/

UPDATE: Found a working solutions for non-IE: object-fit: cover; object-position:center; But I'd like to have a full working solution.

UPDATE: Polyfill should provide the desired function, I will test this on video tags this days, thx to Philip Dernovoy. UPDATE: I am sorry but I didn't get that working.

Answer 1

You could use a combination of positioning and translations to achieve this:

.fixed-width-height {
  position: relative;
}
.fixed-width-height video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

<div class="fixed-width-height">
  <video style="min-width:100%; min-height:100%;" controls autoplay>
    <source src="myvid.mpg" type="video/mp4">
      Your browser does not support the video tag
  </video>
</div>

---

Note:

This will/should work with all browsers bar IE8>= nor Opera Mini as shown here In these browsers, the video will be displayed in the top left corner of the fixed-width-height element (although will still be functional).

---

If you wanted to 'cover' the whole div, you could use:

.fixed-width-height video{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
}

in order to completely cover + stretch to the relatively positioned div parent.