Html Question posted in
Some basic documentation can be found here.

Trouble with video and image backgrounds that can all fit entire screen HTML & CSS

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

Tags:

2

Answers


  1. 0

    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 set object-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 of 60vh with default position of center center (or 50% 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 video {
  width: 100%;
  height: 60vh;
  object-fit: cover;
  object-position: center 25%;
}

    Video on laptop at height 60vh with default position:

    enter image description here

    Video on laptop at height 60vh with position center 25%:

    enter image description here

    Login or Signup to reply.
  2. 0

    use object-fit:cover; for video, by this it fills the entire screen. for image sections set width:100%; so there is no whitespace appears as the screen size change. also remove position:fixed; property from video because with this property there is a big chance that the video overlay on other sections. here is the example:

    body {
  margin: 0;
  padding: 0;
}

.video {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#homepagevideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quince {
  width: 100%;
}

.quince-bg {
  background-image: url("quince.jpg");
  background-size: cover;
  background-position: center;
  height: 100vh;
  margin: 0;
  padding: 0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search