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

HTML & CSS
1

Hello,

We would like a HTML5 Video to stretch to fit the entire DIV that is to contain it. While keeping Aspect Ratio.
The code is working fine in Chrome and FF but as usual IE is not.
You can see it here:

http://www.notefab.com/index_test.php

What suggestion do you have please to have it also work on IE?

PS, No JQuery please, in case there is pure CSS solution to this

Thanks,

2

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.notefab.com%2Findex_test.php

1 Like
3

The video is being stretched using object-fit:cover and IE11 and under don’t support object fit at all. IE Edge (version 16) has partial support but only for images and not videos or other elements.

This fix will work for IE11 but not for IE edge because it understands the object-fit property (even though it doesn’t implement it on videos).

.fullwidth-video video{height:auto}
@supports (object-fit: cover) {
	.fullwidth-video video{height:500px}
}

The only solutions I can see are as follows:

  1. Let all browsers have the auto height and the video will then stretch to 100% and look more or less ok.

.fullwidth-video video{height:auto}

  1. Use a hack for Edge by combining object-fit and a special MS only rule (using the -ms prefix) like this:
.fullwidth-video video{height:auto}
@supports (object-fit: cover){
.fullwidth-video video{height:500px}
}
/* ie edge only gets the following rule */
@supports (object-fit: cover) and (-ms-ime-align:auto) {
.fullwidth-video video{height:auto}
}

The problem with this hack is that when support for Edge arrives then it will still get the old height:auto method (although I don’t see it as a big problem). However hacks are always risky.

4

Paul,

Thanks for this suggestion. I am going to work on it.
But not too hot about it.
I guess since less and less people ever use IE, we can just ignore it :slight_smile:
But working on it.

Thanks

5

The hack I gave only applies to IE11 and Edge so will do no harm to other browsers so you’ve got nothing major to lose by using it.

6

Hi there WorldNews,

check out the attachment to see an example
that works in IE11, Firefox and Chrome. :winky:

I do not have Windows 10, so am unable to
test in Edge. :wonky:

video-fit.zip (58.8 KB)

coothead

7

Hi Coothead,

It may be my mistake but I thought WorldNews was talking about the other full screen video behind the one you fixed.

Maybe I got the wrong end of the stick again :slight_smile:

Anyway you fixed the smaller video for him as I noticed it didn’t fit last time.:wink:

8

Hi there Paul,

when I visited the O.P.'s test page I did not find any video. :wonky:

What I saw was this image…

…poorly positioned in a div element with a white border. :winky:

It appears that javascript was used to display the video element
in the enlarged div element.

So I ignored all that nonsense and instead gave the O.P. a basic
example of video element installation. :rolleyes:

And this…

…helped me decide not to address the small to large effect further. :sunglasses:

coothead

9

Yes Paul, I was referring to the background Video and not the Animated explainer Video.
The Animated explainer Video works fine across all browsers.
It is the background type Video of People which is stretched that does not work right in darn IE :frowning:

10

Ok, my code fixes that as best as possible without a complete re-design.

When I looked at it there was gap at each side of the video holder which cootheads’s code fixes :slight_smile:

11

Paul,

So I applied your hack for IE to display the (background) Video OK. And it does work to the extent that now the (background) Video in IE is stretched to the full dimensions of the DIV containing it. However the Video is cropped top and bottom, so a view point of it is showed. Unlike in FF and Chrome where the whole Video is stretched correctly.
We can live with it as is, since less than 5% of the Site visitors use IE and anyway the Video now covers whole DIV.

Thanks,

12

I dont consider that a Fix!
I like it how there is “gap at each side of the video holder”. Gives it more easy view point. IMHO. So that is a real design and preference issue.

13

Yes that is the only fix until object-fit is implemented for videos in Edge. I think it looks better to have the video 100% even if it is enlarged. You could probably move the focal point but it s probably not worth the effort.

14

You might want to think about that. Are you saying that the height of the video extends taller at wider browser widths so the aspect ratio remains the same in Firefox?
Then let me burst that balloon for you. I see that video behaving in Firefox the way you describe it behaving in IE.
The window for the video has a fixed height of 500px but can extend to the full width of the browser window. When the window extends wider, the video enlarges to fit the width of the window and the top and bottom edges of the video are cropped at the fixed height. When the width of the video window is reduced, at the point where the height of the video matches the fixed height of the window, the video will stop shrinking and the width of the video will be cropped (like background-size:cover)

Of course, I may be misunderstanding again…

15

No I think that’s correct as the only difference between the code I added for IE is that object-fit:cover centers the background video whereas the code I added makes it start at top left. Both examples are the same size as they are stretched to fit the available space whilst maintaining aspect ratio and that means that they both must be the same size except that object-fit centers the result automatically.

I believe we can achieve that result for IE by adding the folloiwng code.

.fullwidth-video video{
top:50%;left:50%;
transform:translate(-50%, -50%);
}

As far as I can tell that makes IE exactly the same as those that support object-fit…

1 Like
16

Actually, I think I did misunderstand what the OP was describing. I seem to be getting much too good at that :shifty:

This is what I see on IE11/Win7 at a narrow width right now:

655Ă—811 202 KB

EDIT: And for comparison, Firefox.

527Ă—760 148 KB

@WorldNews, would you be kind enough to let us know after you have implemented Paul’s latest modification?

Thanks.

17

Ron I disregarded the smaller widths as the site is not optimised for smaller screens on desktop anyway as there is a completely different layout triggered when viewed on a device (which we all know is not the desired approach).

However I think the fix is simply to give IE a width auto and the whole thing should still work.

e.g.

.fullwidth-video video{height:auto;width:auto;}

Which I believe means we can lose all the hacks and just do this for all browsers:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.fullwidth-video {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	height: 500px;
	width: 100%;
	-webkit-transform-style: preserve-3d;
	overflow: hidden;
}
.fullwidth-video video {
	position: absolute;
	z-index: -1;
	top:50%;
	left:50%;
	height:auto;
	width:auto;
	min-width:100%;
	min-height:100%;
	transform:translate(-50%, -50%);
	object-fit:cover;
}
</style>
</head>

<body>
<div class="fullwidth-video">
  <video autoplay loop poster="http://www.notefab.com/video/Going-Places/Snapshots/Going-Places.jpg">
    <source src="http://www.notefab.com/video/Going-Places/Mp4/Going-Places.mp4" type="video/mp4">
    <source src="http://www.notefab.com/video/Going-Places/Webm/Going-Places.webm" type="video/webm">
    <source src="http://www.notefab.com/video/Going-Places/Ogv/Going-Places.ogv" type="video/ogg">
  </video>
</div>
</body>
</html>

That would seem to be a complete representation of the standard object-fit:cover property with the focal point of the image central (the default for object fit).

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.