All geek questions in one place

Background videos in full screen mode in Internet Explorer

I am building a website that uses a self-serving background video in a container 100% wide. It works flawlessly in Chrome and Firefox, but with an error in IE (tested in IE 11).

The video must be stretched to fill the container — maintaining the aspect ratio of the video, however IE just puts the video in the container the size necessary to fill the container vertically.

Screenshot of stretching video to fill container width in Chrome Screenshot of the inability to fill the container in IE

Link to the error page

+5
source share
3 answers
/*you can use this css.*/ .fullwidth-video { position: absolute; top: 0; left: 0; z-index: 1; min-height: 100%; min-width: 100%; -webkit-transform-style: preserve-3d; } .fullwidth-video video { position: absolute; top: 0; left: 0; z-index: 1; min-height: 100%; min-width: 100%; height: auto; width: 100%; object-fit: cover; }

html code here ...

  <div class="fullwidth-video"> <video preload="auto" autoplay loop muted=""> <source src="http://sawyerfirm.ignitte.com/wp-content/uploads/2015/12/Girl-Riding-In-Car-8-BW.mp4" type="video/mp4"> <source src="http://sawyerfirm.ignitte.com/wp-content/uploads/2015/12/Girl-Riding-In-Car-8-BW.webm" type="video/webm"> </video> </div>
+6
source

You can use this, I hope this works for you :)

  This is html code : <div class="video-frame"> <video class="video-box" autoplay poster="video-back.jpg" id="bgvid" loop> <source src="sample.webm" type="video/webm"> <source src="sample.mp4" type="video/mp4"> </video> </div> This is css code : .video-frame { position:relative;margin:40px auto;width:100%;} .video-box { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background: url('video-back.jpg') no-repeat; background-size: cover; transition: 1s opacity;}
+3
source

solvable

I had the same problem for width in IE: the solution I found removes the extra custom css applied by the <video> .

This code should work:

 <!DOCTYPE html> <html> <body> <video width="100%" height="" autoplay> <source src="http://sawyerfirm.ignitte.com/wp-content/uploads/2015/12/Girl-Riding-In-Car-8-BW.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </body> </html>

Then try to remove any additional class / style applied on top / inside your tag

+2
source

Source: https://habr.com/ru/post/1238477/

More articles:


All Articles