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 make smooth grayscale on hover using CSS

    How do I center the contents in this div?

    How to implement a CDN failsafe for css files?

    How to center an image over another image in CSS

    How to prevent from text to extend the
  • container height?
  • How do I align columns in the center of the page? [duplicate]

    How to set out css properly?

    How to display form output in the same page by hiding the form

    How to make a DIV section clickable?

    How much client-side programming is needed when doing server-side programming?

    How can I customize the CSS generated by LESS to include Font Awesome?

    How to set control properties in css?

    How to automatically scroll when div expands at bottom of page?

    How can I get the second line of text to hide and show on hover? CSS only

    How do I select the TD of the TH to which it references with only CSS?

    How can I vertically center text in a ul navigation-bar without these multiple CSS conflicts?

    How to make a snowboard (or squeezed rectangle) shaped div in css?

    how to add more specificity to css class .background-color-blue so it overrides default div's background color

    How to make cards on the image

    How to shield a HTML tag from CSS?

    How to position a drop down list nav bar inside header in html css

    How do I make current menu item active in asp.net webforms

    How to nest multiple css attributes inside another attribute

    How to programmatically download all contents of webpage, not only the source code in Java

    jQuery how to select children first level div's

    How do I center a div between two other divs?

    CSS: How to break images into rows?

    How to create icons like font awesome

    How do I detect the user’s browser and apply a specific CSS file?

    CSS : How to give different spacers within the same navigation menu