How to fit Video into entire screen that works on IE too

Question

I am trying to fit the video background for all browsers including IE without zooming it. Here is my website URL:- https://my-developement.myshopify.com/

It works for most of the browser with CSS property object-fit: cover but IE doesn't support this property.

Please share your views on the issue.

https://stackoverflow.com/questions/37792720/ie-and-edge-fix-for-object-fit-cover — Anatsu, Jun 25 '19 at 11:00
Possible duplicate of [object-fit alternative for IE for a video with 100% width and set height](https://stackoverflow.com/questions/50541021/object-fit-alternative-for-ie-for-a-video-with-100-width-and-set-height) — frobinsonj, Jun 25 '19 at 11:01

score 1 · Answer 1 · answered Jun 25 '19 at 11:25

1

With a tricky combination of vw/vh units, position and transform

.bg {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  z-index: -1;
  top: 0;
  left: 0;
}

video {
  width: 100vw;
  height: 100vh;
  min-height: calc(100vw * 9 / 16);
  min-width: calc(100vh * 16 / 9);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

body {
  margin: 0;
  font-family: sans-serif;
  font-size: 62.5%;
}

.foreground {
  margin: 30px auto;
  width: 60%;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 20px;
}

h1 {
  font-size: 3rem;
  font-weight: 700;
  margin: 0;
}

<div class="bg">
  <video src="https://cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/video.mp4" autoplay muted loop></video>
</div>

<div class="foreground">
  <h1>Background Video Cover</h1>
</div>

answered Jun 25 '19 at 11:25

yunzen

32,854
11
73
106

It still didn't work for me. here is my development website:- https://my-developement.myshopify.com – Devl BRST Jun 28 '19 at 14:32
Which version of IE are you testing in? – yunzen Jun 29 '19 at 15:08
@DevlBRST 1st. You need to state, what does not work. 2nd. It works on my machine (IE11, Win10 Pro) without any flaws – yunzen Jul 01 '19 at 07:10
I am using IE 11 and if you try to resize the screen then the issue will occur. I just want to keep the ratio of the video background without showing blank space or zoomed video. – Devl BRST Jul 02 '19 at 09:42
@DevlBRST Could you make a screencast of the issue happening? – yunzen Jul 02 '19 at 10:04
Sure, Here is the screengrab while resizing the screen to 4:3. http://prntscr.com/oaflkr – Devl BRST Jul 04 '19 at 09:03
This is my viewable website, so I have already tested your code and it ends up with a zoomed video for me. – Devl BRST Jul 09 '19 at 13:05

How to fit Video into entire screen that works on IE too

1 Answers1