HTML5视频上方的H1文本

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.

Answer 1

You want to use absolute positioning, and you can use top: 50%; left: 50%; transform: translate(-50%,-50%); 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>