I’m designing a homepage that has a video background that fits the full screen adjusting to size with no whitespaces. Originally my code worked until I added several images underneath it in their own sections. Now, when the screen size is increased, the video has a whitespace to the right of it and when it’s decreased, the images have a whitespace next to them.
I designed the website on canva and this is ideally what I would like it to look like if that helps gain an understanding of what I’m aiming for : www.specialangelsflowers.com
HTML
<body>
<header>
// this is where I have my navbar, left it out due to irrelevancy //
</header>
<main>
<section class="video" id="video">
<div class="storename">
<h1>Special Angels Flowers</h1>
</div>
<video autoplay muted loop id="homepagevideo">
<source src="quince.mp4" type="video/mp4">
</video>
</section>
<section class="quince" id="quince">
<div class="quince-bg">
<h2>Quinceañeras</h2>
</div>
</section>
CSS
body {
margin: 0 auto;
padding: 0;
width: 100%;
height: 100%;
}
.homepagevideo video{
object-fit: fill;
width: 100vw;
height: 100vh;
position: fixed;
overflow: hidden;
}
.quince-bg{
background-image: url("quince.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 100vh;
margin: 0;
padding: 0;
}
full code on my github if that helps too
https://github.com/bananasantana/specialangels
2
Answers
You need to tell your video element that you want it to stretch horizontally to fill its container. Then set its height to be a decent proportion of the viewport height (I chose
60vh
but you might want a higher number). Then setobject-fit: cover
so that the video will automatically be cropped either horizontally or vertically depending on the screen dimensions.Finally, you can adjust
object-position
to set the focus point towards which the video will be cropped. On my laptop at a height of60vh
with default position ofcenter center
(or50% 50%
), in several of the shots the model’s eyes are being cropped off at the top of the frame. I suggest a vertical position of approximately 25% is optimal for this video.Video on laptop at height 60vh with default position:
Video on laptop at height 60vh with position
center 25%
:use
object-fit:cover;
for video, by this it fills the entire screen. for image sections setwidth:100%;
so there is no whitespace appears as the screen size change. also removeposition:fixed;
property from video because with this property there is a big chance that the video overlay on other sections. here is the example: