How to Overlay Image on Video HTML and CSS

Author
In CSS Tutorial, HTML5 Video Last updated Mar 10, 2017
Overlay Image on Video HTML

There is another interesting thing to overlay an Image on the video using HTML. You may know that to add text to an image is entirely possible and seen a lot of time on different websites. In fact, we can animate the text in a various way over the picture by using CSS3 advance commands.

But do you know a way to add HTML5 Video Overlay Text using CSS? Yep, it’s quite possible and not only this, but We can also add an image over the video. This is quite achievable and can be done this easily through CSS and HTML only.

Overlay Image on Video HTML

We are going to add an image over video using HTML and bit of CSS. The technique I am going to use is similar to the one we used in our previous article adding CSS Text Over Video but with a bit of difference.

Sometimes we have a video and want to add a company logo to the video and this technique help us to do so. If you want to show your video on your website and want to make its branding then it’s good to add your company logo.

Overlay Image on Video HTML Implementation

The HTML is very easy and straightforward. We only need to define the wrapper as we have done for our previous article. The wrapper will hold the video HTML5 tab and a description div.

We will place the video source in the video tag and then add the logo inside the video description DIV.

 <div class="video-wrapper"> <video autoplay loop muted> 	 <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> </video> <div class="video-description"> 	 <h1><img class="img-responsive" width="180" height="40" src="https://codeconvey.com/wp-content/themes/codeconveyV1.5.2/images/logo2.png" alt="Codeconvey" scale="0"></h1> </div> </div> 

Next, we did handle the HTML with CSS, and we will start with the video wrapper. We define the max and min width to keep it responsive and make work on small and medium devices. To make it align the center of the body, we have to set the margin 0 autos.

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

Then, we will set the video to resize according to devices, and we make it’s width 100%, and height will be auto, so it resizes correctly.

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

Now we will need to add an overlay (description DIV) over the video, and we will do this by using position absolute similar we do with an Image. But here is the difference is, we will use the display property and set it’s value to flex. We also need to add a justify-content property to align it the center of div.

 .video-description { background: transparent; position: absolute; top: -72%; right: 0; bottom: 0; left: -55%; 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; } 

We added the H1 tag, so here we will style it to make it look good. We did use the background and some padding. The other elements like color and font-size etc. don’t need for the image but require if you also want to add text to the video.

 .video-description h1 {
background: #fff none repeat scroll 0 0;
color: #000;
font-family: "Nobile",sans-serif;
font-size: 2em;
margin: 0;
padding: 6px 12px;
text-align: center;
}

This is a simple technique to add image or logo over the video. Please share and leave your feedback in below comment section.

Leave a Reply

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