3

I am trying to get a fullscreen video to work on my site, but I am having trouble getting it to work on IE Edge and 11. If I add height:auto to my class then it works correctly in IE and the video appears the full width, of the screen, but the layout is not ideal in Chrome ect, with this declaration as it adds a bunch of space at the bottom.

Is there a way to have height:auto only be read by IE browsers and disregarded by Chrome, Firefox ect?

#video-wrapper,
#video {
position: absolute;
top: 0;
left: 0;
z-index: 1;
min-height: 100%;
min-width: 100%;
}

#video { 
  height: auto; /*only want this read by IE */
  object-fit: cover;
}

HTML

<section id="video-wrapper">
  <video autoplay muted loop id="video">
    <source src="...">
  </video> 
</section>
p_waves
  • 361
  • 1
  • 6
  • 12
  • 1
    This might help you: https://msdn.microsoft.com/en-us/ie/dn254939(v=vs.94) –  Mar 11 '19 at 20:51
  • 1
    your problem is more likely the `object-fit` property you are using. IE doesn't fully support that yet. [reference](https://caniuse.com/#search=object-fit) - _Partial support in Edge refers to object-fit only supporting ``_ – zgood Mar 11 '19 at 20:51
  • 1
    https://stackoverflow.com/questions/28417056/how-to-target-only-ie-any-version-within-a-stylesheet/35486073 Take a look at this question. – Danielr Mar 11 '19 at 21:09
  • thanks for help everyone, I ended up targeted my video element directly and it correctly stretched the video to be the full width of the screen. – p_waves Mar 12 '19 at 21:10

0 Answers0