H1 Text Above HTML5 Video

Question

I have a background video and I would like to float text over the top of it. Currently it looks like this:

The green banner is the video and I would like the black heading text to float over the top of it.

Specifically, I would like the text to be aligned entered horizontally AND vertically. So It looks like this:

Here is the code I have tried so far...

HTML

<div class="homepage-video">

        <video autoplay loop muted>
          <source src="https://player.vimeo.com/external/208845912.hd.mp4?s=2c04fe329c04029926a99943f076c84c6b86bb46&profile_id=119" type="video/mp4">
        </video>


        <div class="text-over-video">
            <h1>HEADING TEXT GOES HERE</h1>
        </div>

    </div>

CSS

.homepage-video video {
    position:relative;
    width: 100%;
    height: auto;
    display:table;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important;

}

.text-over-video {
    text-align: center;
}

I've tried messing around with absolute and relative positioning and floating, I think to get the text entered I will need to add table elements?

I achieved this with help for header images here: http://ideedev.co.uk/newseed/design/ But I can't for the life of me get it working with the video... <<-- This is the part that is unique, I had already achieved it using images but I couldn't use the same approach with video. This will helps someone if they are having the same issue.

Possible duplicate of [How to horizontally and vertically center arbitary text over an image in HTML?](http://stackoverflow.com/questions/31267559/how-to-horizontally-and-vertically-center-arbitary-text-over-an-image-in-html) — Rob, May 09 '17 at 18:18
Possibly, But I have already done it with an image, but the same approach didn't seem to work with the video. Thanks though. — Shaun Taylor, May 09 '17 at 18:33

score 1 · Accepted Answer · answered May 09 '17 at 18:15

You want to use absolute positioning, and you can use top: 50%; left: 50%; transform: translate(-50%,-50%); to center it.

.homepage-video, .homepage-video video {
  position: relative;
}
.homepage-video video {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important;
}

.text-over-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}

<div class="homepage-video">
  <video autoplay loop muted>
    <source src="https://player.vimeo.com/external/208845912.hd.mp4?s=2c04fe329c04029926a99943f076c84c6b86bb46&profile_id=119" type="video/mp4">
  </video>
  <div class="text-over-video">
    <h1>HEADING TEXT GOES HERE</h1>
  </div>
</div>

H1 Text Above HTML5 Video

1 Answers1