How to make responsive video background in DIV container with dynamic height?


Tags: css,twitter-bootstrap,video,background,html5-video

Problem :

I've been looking for a way to create a video background (preferably an HTML5 / CSS-only solution) for a header DIV on a little micro-site.

Obviously, there are a lot of resources on how to do this if you want a fixed background (position:fixed;) that'll apply to the entire page or if your DIV has a fixed height, but I want to apply it to a single DIV (within the Bootstrap framework, coincidentally) with a dynamic height attribute.

It would have a min-height value of 100vh, but the DIV's height should be able to be larger depending on the content within it (in this scenario, I have a couple of introductory paragraphs that would likely require some scroll on smaller screens).

I kind of got it half way there with my original approach, but a little bit of my video extends beyond the container DIV and giving the container an overflow:hidden; attribute doesn't help.

Here's a CodePen with the code below + Bootstrap so that you can see what I'm talking about in action.

Screenshot of the video extending into the next DIV, just in case.

This is essentially the pertinant code to my 90% of the way there option... (it looks like the video takes the 100% width this way, but it doesn't crop the height to the container):

<div class="content contain-header">
  <div class="container">
    <div class="row main-header">

      <video autoplay loop poster="images/clouds.jpg" id="bgvid">
        <source src="images/clouds.webmhd.webm" type="video/webm" />
        <source src="images/clouds.mp4" type="video/mp4" />
      </video>

      <div class="col-md-2 col-xs-1">
      </div>
      <div class="col-md-8 col-xs-10">
        <img src="images/logo.svg" class="header-logo" />
        <h1 id="header-you">Wow</h1>
        <p>Business model canvas rockstar user experience founders handshake. Startup responsive web design bootstrapping first mover advantage disruptive crowdfunding. User experience iteration seed money rockstar holy grail deployment prototype gen-z backing influencer handshake success. Virality growth hacking innovator product management iPad.</p>
            <p>Crowdsource marketing non-disclosure agreement graphical user interface bootstrapping market research & development:</p>
            <p class="punch">Stratup Ipsum!</p>
            <p class="continue"><a href="#next"><span class="glyphicon glyphicon-menu-down"></span></a></p>
          </div>        
          <div class="col-md-2 col-xs-1">
          </div>
        </div> 
      </div> 
</div>

And the relevant CSS, in SCSS format (+Bootstrap v3.3.5):

.contain-header {
  background-color: rgba(0, 0, 0, 0.6);
    .main-header {
      min-height:100vh;
      display:block;
      color:$color-white;
        video#bgvid {
          position:absolute;
          top:50%;
          left:50%;
          min-width:100%;
          min-height:100%;
          width:auto;
          height:auto;
          z-index:-100;
          -ms-transform: translateX(-50%) translateY(-50%);
          -moz-transform: translateX(-50%) translateY(-50%);
          -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
          background: url(../images/clouds.jpg) no-repeat;
          background-size: cover;
        }
        video {
          display:block;
        }
        .header-logo {
          max-width:40%;
          height:auto;
          margin:0 auto;
          display:block;
          padding-top:20px;
        }
        h1#header-you {
          text-transform:uppercase;
          text-align:center;
          font-family:$tultra;
        }
        p {
          font-size:2rem;
        }
        p.punch {
          font-size:2.3rem;
          text-align:center;
          margin-top:30px;
        }
        .continue {
          text-align:center;
          padding-top:20px;
          padding-bottom:40px;
            a, a:visited {
              color:$color-white;
              text-decoration:none;
            }
            a:hover {
              color:$color-gray-icons;
              text-decoration:none;
            }
        }
        @media screen and (max-width: 767px) {
          p {
            font-size:1.4rem;
          }
          p.punch {
          font-size:1.8rem;
          }
        }
    }
}


Solution :

Try adding this to the start of your styles

.contain-header {
  position: relative;
  overflow: hidden; 
  background-color: rgba(0, 0, 0, 0.6);
  ...

The position relative on the contain-header means that the video min-height, min-width etc. is relative to it.


    CSS Howto..

    How to perform --include-css when using the Jekyll stylus plugin

    How can I hide an element that doesn't have an id from the CSS?

    how to use 'selector gadget' to scrape data into R?

    How to draw realistic smooth slit shadow with Pure CSS3?

    How to make bootstrap 3 navbar not wrap

    CSS: How to align text to the center of the image (left side)

    How Do I Place An Image To The Right of a Body of Text?

    How to reset css in middle of html document?

    How to achieve a two column centered layout, with the main column expandable on wider screens?

    How do I add box shadows when the parent div has a background image?

    How do I alter this HTML/CSS to make the container expand horizontally to the floated children?

    How to get the css with in inline styles using jquery

    How to use an image more than one place in CSS

    How to zoom content to screen width

    How to override html property created by script (mediaelement.js)

    How to make a div snap to min or max size, without any sizes in-between?

    How to create a header that changes as you scroll down the page? [duplicate]

    meteor: how to use multiple classes in css selector

    How to start a css animation from current position

    How to Make Radio Button Into CSS Button?

    How to keep long image within background cover at any screen size in CSS?

    CSS: how to get scrollbars responsive for div inside container when user resizes it upwards

    How to add labels for multiple textboxes inside 1 li element

    How to make a
    container width and height for each same as “the value of clientWidth and clientHeight in maximized window”?

    Jquery - How to alternate an :Odd :Even pattern every 4 ?

    How to position main content below header and footer in css

    How to use css styling in html with multiple directories?

    How to make one list-item in menu higher than the others with CSS?

    How to apply css for only second occurance

    How to display form labels with more than one element per line? jsfiddle