How To Vertically Center Text Over Responsive Video


Tags: javascript,jquery,html,css,html5-video

Problem :

For some reason this is giving me heck and can't find a solid answer.

I have a video playing in the background that goes to full-width and is responsive to the screen size. I have a title/text over the video. But I cannot for the life of me figure out how to vertically center this text to the video in a responsive way! Thanks for any help!

Codepen:

http://codepen.io/149203/pen/VagPxe

html:

<body>
  <div class="header-container">
    <div class="video-container">
      <video preload="true" autoplay="autoplay" loop="loop" volume="0">
            <source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" type="video/mp4">
        </video>
    </div> <!-- video-container -->
    <h3>Centered Title</h3>
    <h6>This should be vertically and horizontally centered</h6>
  </div> <!-- header-container -->
</body>

css:

.header-container {
  width: 100%;
  height: 100vh;
  position: relative;
  padding: 1px;
}

.video-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

video {
  position: absolute;
  z-index: -100;
  width: 100%;
}

h3,
h6 {
  text-align: center;
  color: white;
}

pulling in this css:

https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cyborg/bootstrap.min.css


Solution :

I found and forked this CodePen. This is the best solution I found. (Uses Bootstrap.)

http://codepen.io/149203/pen/JXxbEL

HTML

<div class="row">
  <div class="col-xs-12 vert-center-container">
    <video autoplay loop style="width:100%" class="img-responsive">
      <source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" />
    </video>
    <div class="vert-center-text">
      <h1>Caption Text</h1>
    </div>
  </div>  
</div>

CSS

.vert-center-text {
   position: absolute; 
   top: 40%; 
   left: 0;
   text-align: center; 
   width: 100%; 
}

.vert-center-text h1 { 
    color: white;
}

.vert-center-container {
  position:relative;
}

    CSS Howto..

    How to edit the CSS of a selector in Polymer 1.0

    How to get an automatic effect of rosace in css ?

    How to have div horizontally scroll when resized.

    CSS image rollover map and jQuery : how to use a second li list?

    How To Make Navigation With Images That Is Clickable?

    How to adjust the height of two objects floating next to each other according to the amount of content, using css

    How to blur only background and not content in Ionic/CSS

    How to preload style image to use it when server is down?

    How to call in Javascript a requestAnimationFrame loop?

    How to write variable with multiple css properties in Sass

    Clip the vertical and horizontal overflow of
     tag outside of its container, and show scrollbars

    How to relativize URLs in css files in Hakyll?

    How do you right-align text into a column?

    How can I add a hover effect to icons with CSS? [closed]

    How to position divs inline with same spacing

    How can I display links in 2 rows?

    How to get all images(overlapping allowed) in one line using css?

    How to get the exact RGBa value set through CSS via Javascript?

    How to make Bootstrap navbar brand image larger

    how to change css style for every second data (picture) from database?

    How to create a circle with text coming out of it like rays [closed]

    How do nested vertical margin collapses work?

    How to center multiple inline-block elements with CSS?

    how can we prevent a block from being printed across different pages

    How to ONLY target Chrome DevTools window in CSS?

    How to apply CSS to first child div element only?

    How to create custom buttons with arrows for twitter bootstrap?

    CSS overflow : How to fix css overflow scroll bug

    css how to make two div side by side

    How to prevent an absolutely positioned element to affect the scrollbar?