How to Add CSS Text Over Video

Author
In CSS Tutorial, HTML5 Video Last updated Mar 10, 2017
CSS Text Over Video

It’s easy to add the CSS Text Over Video and Yesterday, We have already explained you a process of making HTML5 Video Overlay Text using CSS, but that was the fullscreen Video. Today I am going to show you how to add text to top or center of video using CSS and HTML, but we will make the video small in size. We will keep the video size as we want.

CSS Text Over Video

The previous article is bit change as compared to this one regarding CSS coding and HTML. Overall, it looked almost same and used the same technique.

It’s easy to place the text over the image but when we talk about the video, we do need to think bit differently. The process is somewhat similar to image but needs to add few extra CSS functions to add the text over the video.

CSS Text Over Video Implementation

Ok, let’s have a look the implementation and here is HTML. You do notice that we have the primary container called video-container wich hold the video HTML5 tag and an overlay div.

 <div class="video-container"> <video autoplay loop muted> <source src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4"> </video> <div class="video-overlay"> <h1>Overlay Text</h1> </div> </div> 

What we do with CSS to make the container max-width 720px and min-width 320px to make it work on small devices. We set the margin 0 auto to align in the center of a page.

 .video-container { margin: 0 auto; max-width: 720px; min-width:320px; padding: 6em; position: relative; } 

The video need the width 100% to make it look perfect for small devices and height will be auto.

 video { height: auto; vertical-align: middle; width: 100%; } 

The overlay doesn’t need the background, but you can add if you require. The position absolute with top, right, bottom and left to be set to zero.

We also used the display flex property and box-align center for proper alignment. To align better, we used the justify-content CSS3 property.

 .video-overlay { background: transparent; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 

Finally, we do add few styles to H1 tag like color, font-size, and font-family, etc.

 h1 { color: #000; font-family: "Nobile",sans-serif; font-size: 2em; text-align: center; } 

Now we are going to show you demo and let’s have a look the demo below.

Leave a Reply

Your email address will not be published. Required fields are marked *