Make HTML5 Video Overlay Text with CSS

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

It’s easy to overlay text over the image but what about overlay text over the HTML5 video? I’ve previously demonstrated fullscreen HTML5 Responsive Video Background and also show you how to make Video Parallax Background Using CSS3. Today It’s time to play more with video and find out a way to add Text over the video.

HTML5 Video Overlay Text

We have found a fashion site Everlane which build just such a thing, which I’ve used as an inspiration for this article.

However the code is pretty much simpler as compared to the previous fullscreen video example, it also assumes that visitors are using far more recent browsers: mix-blend-mode isn’t yet supported in MS Edge. That being said, the code is still progressive: the video background will work in IE10+.

HTML5 Video Overlay Text Implementation

Let’s start with HTML5 and we do use the video element which uses the new plays inline attribute (allowing in-page playback in iOS 10). Also, we do use the autoplay, muted and loop functions.

 <video playsinline autoplay muted loop> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 	<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video"> </video> 

We do define the source of video and it’s best to set all three for a wide range of browsers supports.

I have added a top bar navigation to make the demo look good and also let you know how you can do the navigation easily. I used the HTML5 header element and then define the nav html5 element.

I have to place HTML links inside the nav without unorder list, but you can do that.

 <header> <nav> <a href="#">Services</a> <a href="#">Shop</a> <a href="#">Stores</a> <a href="#">Products</a> </nav> </header> 

Just right below the navigation, I have placed some content. This text inside a div class name overlay. You can do also add a link or another HTML element inside overlay div.

 <div class="overlay"> <h2>Meet the crazy-smart women we asked.</h2> </div> 

Styling CSS

The video HTKML5 element is given an absolute position, with object-fit and a width and height of 100% to cover the browser window. I am making it fullscreen, but you can change it by editing the CSS.

 video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } 

I also did style the fixed header by setting color, background, and transition, etc.

 header { background:tan; position: fixed; width: 100%; text-align: center; color: white; -webkit-transition: .4s; transition: .4s; padding: 0.5em; } nav a { color: inherit; padding: 0 12px; text-decoration: none; } 

The central overlay text is inside a div class name .overlay uses flexbox to center its content, with a height that is at least the height of the browser window:

 .overlay { min-height: 100vh; display: flex; align-items: center; justify-content: center; } 

The text in the center uses mix-blend-mode: overlay to contrast the text; a value of difference would also be valid.

 .overlay h2 { background: #000 none repeat scroll 0 0; color: tan; font-weight: 600; margin: 2rem 3rem 0; mix-blend-mode: overlay; padding: 5px 15px; text-align: center; } 

Lets’ have a look the demo below to see how it work.

See the Pen HTML5 Video Overlay Text by codeconvey (@codeconvey) on CodePen.

Leave a Reply

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