html - Simulating background-size: cover with center position on HTML5 -

html - Simulating background-size: cover with center position on HTML5 <video> -

i'm trying simulate functionality of background-size: cover on <video> element. have managed next code:

<video id="videobackground" autoplay="true" loop="true"> <source src="backgroundfinal2.mp4" type="video/mp4"> </video> #videobackground { position: absolute; bottom: 0px; right: 0px; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1000; overflow: hidden }

problem i'd simulate functionality of background-position: center center; , don't know how that. current code video cutting off left , top if required - want cutting both sides.

any ideas/solutions, please? thanks!

disclaimer: i've been experimenting web development (or sort of code/script) 9 months, don't assume solution without fault. see footnote known issues.

i've been facing same problem, , think understand you're looking for.

basically, regardless of screen width/height, video's horizontal , vertical edges should never come in viewport, aspect ratio should retained , video should centered vertically , horizontally.

example video 1920x800 resolution:

*(css vendor prefixes missing)

html

<div class="bg-vid-container"> <video id="bg-vid" class="cover" poster="lib/img/bg-vid.poster.png" autoplay loop> <source src="lib/vid/bg-vid.mp4" type="video/mp4"/> </video> </div>

css

.bg-vid-container { width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; } video.cover { width: 100%; min-width: 240vh; height: auto; }

the flex box model justify-content , align-items set center maintain video vertically , horizontally centered , overflow: hidden; stops unwanted scrolling.

the min-width set in case 240vh (view height unit, 1vh=1% of window height). calculated scaling aspect ratio height of 100 (i utilize andrew hedges' aspect ratio calculator).

1920x800 scales 240x100.

this prevent video's height dropping below 100% still allow it's width 100% if browser window gets wide, increasing height @ point.

according caniuse.com, flex box model , vh unit both have support.

this wont work desired (yet) on mobile seeing on devices, keyboard sliding resizes window. i'm working on jquery/css media query solution this. i'll update results if work intended. ios 7's back upwards vh bit sketchy.

html css html5