149203 149203 - 6 months ago 34
Javascript Question

How To Vertically Center Text Over Responsive Video

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

Answer

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;
}
Comments