Centering responsive video background on website in css3
Question
I'm trying to center video background on website.
On 1920x1080 size everything is ok, but on smaller devices, video isn't centered.
How can i fix this ?
My index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>video web</title>
<link rel="stylesheet" href="css/style.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->
<script src="js/jquery.js"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="container">
<a href="mailto:website@videowebsite.com">
<video autoplay loop poster="images/intro.jpg" id="bgvid" align="middle">
<!--<source src="video/izba_intro.webm" type="video/webm">-->
<source src="video/izba_intro.mp4" type="video/mp4">
</video>
</a>
</div>
</body>
</html>
My CSS:
video#bgvid {
position: absolute; right: 0; bottom: 0; left:0; top: 0; z-index: -100;
background: url(../images/intro.jpg) center no-repeat;
width: 100%; height: 100%; margin: auto;
}
video { display: block; display: block;
margin: 0 auto;}
video#bgvid { transition: 1s opacity; }
.stopfade { opacity: .5; }
/* mobile */
@media screen and (max-device-width: 800px) {
body {
background: url(../images/intro.jpg) #000 no-repeat center center fixed;
}
#bgvid {
display: none;
}
}
How I can fix this to get responsive video background ? Is it possible to get this result in pure css3 without writing javascript ?
Thanks for help.
3 answers
solution1
0 2015-04-28 11:00:50
To fix it you have to adjust the css containing the video, telling it that the minimum height has to be 100% in both parts. I had a similar issue and I solved it in the following way:
#bgvid {
position: absolute; right: 0; top: 0; z-index: -100;
background: url(../images/intro.jpg) center no-repeat;
min-width: 100%; min-height: 100%; margin: auto;
}
I have edited the code with your details. Let me know if it works.
solution2
0 2015-04-28 11:03:52
You could also use:
video {
width: 100%;
height: 100vh; /* stretch to screen height */
}
solution3
0 2015-06-16 11:04:17
I'll just copy paste my answer from another question, the key here is keeping it centered.
Disclaimer : I've only been experimenting with web development (or any sort of code/script) for about 9 months, so don't assume my solution is without fault. See footnote for known issues.
I've been facing the same problem, and I think I understand exactly what you're looking for.
Basically, regardless of screen width/height, the video's horizontal and vertical edges should never enter the viewport, aspect ratio should be retained and the video should be centered vertically and horizontally.
Example for a video with a 1920x800 resolution:
*(CSS vendor prefixes are missing)
HTML
.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;
}
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 with justify-content and align-items set to center will keep the video vertically and horizontally centered and overflow: hidden; stops unwanted scrolling.
The min-width is set in this case to 240vh (view height unit, where 1vh=1% of window height). This is calculated by scaling the aspect ratio to a height of 100 (I use Andrew Hedges' Aspect Ratio Calculator ).
1920x800 scales to 240 x100.
This will prevent the video's height from dropping below 100% but still allow it's width to be 100% if the browser window gets that wide, simply increasing its height at that point.
According to caniuse.com , the flex box model and the vh unit both have good support.
This wont work as desired (yet) on mobile seeing as on some devices, the keyboard sliding up resizes the window. I'm working on a jQuery/CSS media query solution to this. I'll update with results if they work as intended. iOS 7's support for vh is also a bit sketchy.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.