Video background in a DIV with an image stuck to the bottom is not functioning correctly as intended

Question

Video background in a DIV with an image stuck to the bottom is not functioning correctly as intended

Currently, I am working on a layout at the top of a page that includes a div with images and a video background. However, I'm encountering difficulties in getting it to work properly. Initially, everything seemed fine in my first version until issues arose when attempting to make it compatible with different browser window widths. The setup is as follows:

https://i.sstatic.net/iuD3A.jpg

Blue - DIV with video background, green - images, green with orange border - image intended to stick to the bottom of the video, half of its height extending beyond the video area, and gray - regular page content.

The two problems I've encountered are the inability to find a way for the image (with an orange border) to consistently stay at the bottom of the video while partially extending beyond the video's bounds. It needs to maintain this position regardless of screen width changes. Also, the background of the video-containing DIV does not stretch to match the browser width like the video itself. I want it to be constantly covered by the video, adjusting size accordingly.

If anyone has suggestions on how to rectify these issues to achieve the desired outcome, please share!

Here is the relevant code snippet (page width on js fiddle may need adjustment for issue observation):

https://jsfiddle.net/yLmryL48/3/

See below for the detailed CSS code utilized:

body {margin: 0px;}
#video_box {
 width:100%;
 position:relative; height:720px;
 background: url("http://i.imgur.com/X3mb6AD.jpg"); -webkit-background-size: cover; 
-moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}
#video_overlays {position:absolute; text-align:center; width:100%;}
#vt_logo, #vt_url { display:block;}
... // Additional CSS code continues here

html css

Answer 1

Answer №1

The dimensions of the video element are maintaining its aspect ratio, which is why it doesn't fill the entire div. If you want to stretch it, you can utilize CSS's object-fit. To crop an image and cut off 50% vertically, you can use translateY(50%)

CSS:

body {
  margin: 0px;
}
#ccontainer {
  position:relative;
  width:100%;
  height:550px;
  background: url("http://i.imgur.com/X3mb6AD.jpg");
  background-size: cover;
  -webkit-background-size: cover; 
  -moz-background-size: cover;
  -o-background-size: cover;
}
#cvideo, #videooverlays {
  position:absolute;
  top:0;
  left:0;
}
#cvideo, #videooverlays, video {
  width:100%;
  height:100%;
}
video {
  image-fit:fill;
  object-fit:fill;
}
#vid_top {
  position:relative;
  top:50px;
  width:100%;
  height: auto;
}
#vt_logo {float:left; margin-left:50px;}
#vt_url {float:right; margin-right:50px;}
#slogan {position:relative; top:70px; width:100%; height:auto; text-align:center;}
#slogan img {
  width:50%;
}
#slogan2 {position:relative; top:70px; width:100%; height:auto; text-align:center;}
#slogan2 img {
  width:50%;
}
#icons {position:absolute; bottom:0; width:100%; height:auto; text-align:center;}
#icons img {width:70%;transform:translateY(50%);}
#lipsum {width: 60%;  margin: 0 auto;}

HTML:

<div id="ccontainer">
<div id="cvideo">
  <video preload="preload" autoplay="autoplay" loop="loop" muted poster="http://i.imgur.com/X3mb6AD.jpg"> 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>
<div id="videooverlays">
  <div id="vid_top">
            <div id="vt_logo">
                <img src="http://i.imgur.com/Od0DZBj.png">
            </div>  
            <div id="vt_url">   
                <img src="http://i.imgur.com/ns80hYp.png">
            </div>
      <div style="clear:both;"></div>
      <div id="slogan">
        <img src="http://i.imgur.com/JrOXRf2.png">
      </div>
      <div id="slogan2">
        <img src="http://i.imgur.com/7mRLS9s.png">
      </div>
    </div>
        <div id="icons">
            <img src="http://i.imgur.com/XEEAcQx.png">
        </div>
    </div>
</div>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu tortor mi. Etiam bibendum pellentesque dignissim. Cras eu massa elit. Ut sit amet metus porta, hendrerit mauris at, elementum massa. Duis malesuada ac odio id faucibus. Mauris malesuada elementum dui luctus tempor. Integer in lacus vel risus dignissim vehicula eget vel purus. Sed non sollicitudin arcu. Cras ac ligula at nisl vulputate fringilla et non est. Etiam placerat volutpat eros id facilisis. Nunc sollicitudin ipsum ipsum, vestibulum rutrum sem dapibus quis.
</p>
... (additional lorem ipsum text)
</div>

Answer 2

The dimensions of the video element are maintaining its aspect ratio, which is why it doesn't fill the entire div. If you want to stretch it, you can utilize CSS's object-fit. To crop an image and cut off 50% vertically, you can use translateY(50%)

CSS:

body {
  margin: 0px;
}
#ccontainer {
  position:relative;
  width:100%;
  height:550px;
  background: url("http://i.imgur.com/X3mb6AD.jpg");
  background-size: cover;
  -webkit-background-size: cover; 
  -moz-background-size: cover;
  -o-background-size: cover;
}
#cvideo, #videooverlays {
  position:absolute;
  top:0;
  left:0;
}
#cvideo, #videooverlays, video {
  width:100%;
  height:100%;
}
video {
  image-fit:fill;
  object-fit:fill;
}
#vid_top {
  position:relative;
  top:50px;
  width:100%;
  height: auto;
}
#vt_logo {float:left; margin-left:50px;}
#vt_url {float:right; margin-right:50px;}
#slogan {position:relative; top:70px; width:100%; height:auto; text-align:center;}
#slogan img {
  width:50%;
}
#slogan2 {position:relative; top:70px; width:100%; height:auto; text-align:center;}
#slogan2 img {
  width:50%;
}
#icons {position:absolute; bottom:0; width:100%; height:auto; text-align:center;}
#icons img {width:70%;transform:translateY(50%);}
#lipsum {width: 60%;  margin: 0 auto;}

HTML:

<div id="ccontainer">
<div id="cvideo">
  <video preload="preload" autoplay="autoplay" loop="loop" muted poster="http://i.imgur.com/X3mb6AD.jpg"> 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>
<div id="videooverlays">
  <div id="vid_top">
            <div id="vt_logo">
                <img src="http://i.imgur.com/Od0DZBj.png">
            </div>  
            <div id="vt_url">   
                <img src="http://i.imgur.com/ns80hYp.png">
            </div>
      <div style="clear:both;"></div>
      <div id="slogan">
        <img src="http://i.imgur.com/JrOXRf2.png">
      </div>
      <div id="slogan2">
        <img src="http://i.imgur.com/7mRLS9s.png">
      </div>
    </div>
        <div id="icons">
            <img src="http://i.imgur.com/XEEAcQx.png">
        </div>
    </div>
</div>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu tortor mi. Etiam bibendum pellentesque dignissim. Cras eu massa elit. Ut sit amet metus porta, hendrerit mauris at, elementum massa. Duis malesuada ac odio id faucibus. Mauris malesuada elementum dui luctus tempor. Integer in lacus vel risus dignissim vehicula eget vel purus. Sed non sollicitudin arcu. Cras ac ligula at nisl vulputate fringilla et non est. Etiam placerat volutpat eros id facilisis. Nunc sollicitudin ipsum ipsum, vestibulum rutrum sem dapibus quis.
</p>
... (additional lorem ipsum text)
</div>

Video background in a DIV with an image stuck to the bottom is not functioning correctly as intended

Answer №1

Similar questions

Guide on updating a table row upon clicking the edit button in an Angular 12 template-driven form

What is the best way to retrieve the global styles.scss file from the assets folder for privacy, legal, and conditions pages

Utilize HTML code within a .php file without it being parsed

Issue with image preview functionality in dialog modal when loading content via ajax request

What could be the reason behind the jPlayer video not playing?

Building an HTML Form for Requests

Firefox causing line-height problem

When a user clicks on the product id field, I would like to add my data underneath the table and then conduct a search

Error encountered when submitting HTML form containing file input: ERR_CONNECTION_RESET

Struggling to access the content enclosed within label tags within a jQuery AJAX function

What is the best way to align this in the middle on iOS?

When you add the measurements of two images to the top bar, you get the viewport size

Ways to widen a selected drop-down menu outside the dialog box containing it

Help needed with CSS menu dropdown problem

Tips for capitalizing the first letter of a directory

Optimizing Textpaths Placement within SVG Elements

Tips for adding a search button within the input field

The Firefox parent was not appearing on the screen

Arranging Divs with Right Float Alignment

Photo on vertical display