How To Fit Video Into Entire DIV That Works On IE Too - SitePoint

Có thể bạn quan tâm

SitePoint Forums | Web Development & Design Community

HTML & CSS WorldNews December 6, 2017, 11:50pm 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.phpWhat suggestion do you have please to have it also work on IE?PS, No JQuery please, in case there is pure CSS solution to thisThanks, ronpat December 7, 2017, 2:20am 2 https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.notefab.com%2Findex_test.php1 Like PaulOB December 7, 2017, 11:54am 3

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

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).The only solutions I can see are as follows:

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}

Use a hack for Edge by combining object-fit and a special MS only rule (using the -ms prefix) like this:

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. WorldNews December 7, 2017, 5:45pm 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

But working on it.Thanks PaulOB December 7, 2017, 6:37pm 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. coothead December 7, 2017, 7:15pm 6 Hi there WorldNews,check out the attachment to see an example that works in IE11, Firefox and Chrome.

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

video-fit.zip (58.8 KB)coothead PaulOB December 7, 2017, 8:36pm 7

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

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

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

coothead December 7, 2017, 9:21pm 8 Hi there Paul,when I visited the O.P.'s test page I did not find any video.

What I saw was this image…

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

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.

And this…

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

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

coothead WorldNews December 7, 2017, 9:25pm 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

PaulOB December 7, 2017, 9:36pm 10

It is the background type Video of People which is stretched that does not work right in darn IE

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

The Animated explainer Video works fine across all browsers.

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

WorldNews December 7, 2017, 9:36pm 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, WorldNews December 7, 2017, 9:38pm 12

was gap at each side of the video holder which cootheads’s code fixes

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. PaulOB December 7, 2017, 10:21pm 13

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.

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. ronpat December 7, 2017, 10:32pm 14

Unlike in FF and Chrome where the whole Video is stretched correctly.

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…

PaulOB December 8, 2017, 1:28pm 15

Of course, I may be misunderstanding again…

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.As far as I can tell that makes IE exactly the same as those that support object-fit…1 Like ronpat December 8, 2017, 5:48pm 16 Actually, I think I did misunderstand what the OP was describing. I seem to be getting much too good at that

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

655×811 202 KBEDIT: 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. PaulOB December 8, 2017, 8:14pm 17

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

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: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). system Closed March 10, 2018, 3:15am 18 This topic was automatically closed 91 days after the last reply. New replies are no longer allowed. Related topics