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 do I center text relative to its parent div with CSS?

    How do I get css links to resolve correctly when adding a PathInfo value?

    How to inject css in another page

    How to manipulate the window list color?

    How to make angular material dialog box work in IE10

    How to select Bootstrap's collapsed menu button with CSS

    How to modify a div with another div with Css

    How to make colspan work without affecting width of the other rows

    Show/Hide inline Form

    toggleClass on the same container and show different content with tabs effect

    How to apply a underline style to piece of text

    How to implement a navbar with HTML / CSS

    How to avoid a vertical dropdown menu to add the vertical scrollbar when at bottom?

    css boxes are not shown in the right place (when adding doctype)

    How to have logo go into / overlay black bar along the top of screen?

    How to break this Javascript into seperate CSS classes?

    How to make CSS (or JS?) hideable help bar

    How can I flip multiple div at same time?

    using overflow hidden, show a partial element when the children are too large for container

    How to temporarily add a CSS style?

    How can you align all the cells to the left with css [closed]

    How to make overflow blocks working well ()

    how to see background color of div when if move on image

    HTML divs, how to wrap content?

    In firebug, how do I find out all of the css styles being applied to a particular element?

    How do I properly use display:block on this menu?

    How do you make an input element fill parent?

    How can I align a button at the bottom of a div?

    How to use the computer modern font in webpages?

    How to change style of scroll-bar with a fixed position in angular