How to Overlay a Logo on HTML5 Video

Do you want to place a logo on the HTML5 video? In this tutorial, We will show you how to add it and align anywhere over the video by using little code of CSS and HTML.

You may know that — adding text on an image is entirely possible and seen a lot of time on different websites. In fact, we can animate the text in various ways over the picture by using CSS3 advance commands.

How about adding a log or image on the video? Yep! That’s quite easy to implement. Not only this but we can also add a text over the HTML5 video with the help of CSS absolute property.

The technique I am going to use is similar to the one we used in our previous article adding an Overlay Play Button over the 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 helps us to do so. If you want to show your video on your website and want to make its branding then it’s a good idea to add your company logo.

How to Place Logo Over HTML5 Video

To place a logo over an HTML5 video, We will first take look the HTML code example.

We only need to define the video-wrapper. Just like we have done in our previous article. The wrapper will hold the video HTML5 tag and a description DIV with the class name video-description.

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="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
   </video>
   <div class="video-description">
	<img class="img-responsive" width="180" height="40" src="logo.png" alt="Codeconvey" scale="0">
   </div>
</div>

That’s good enough with HTML and reset of all the about styling.

HTML5 Video Wrapper Style

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 auto.

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

Then, we will let the video to resize according to different screen sizes, 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%;
}

Adding Overlay Logo

Now we will need to add an overlay (description DIV) over the video. We will do this by using position absolute similar we do with an Image Overlay.

But here is a very important thing to be noted. We will use the display property and set it’s value to flex. We also need to add a justify-content property to align the logo 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;
}

Optional Styles

This is an optional style to which you can add to make the logo a little nicer. You need to wrap the logo with an H3 tag and then add the following style.

.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;
}

It will add a white background color to the logo, some padding and other general styles like color and font-size, etc. It doesn’t need a logo but It requires if you want to add some tagline with logo.

Also if in some case, The logo did not get displayed, These styles help image alt tag to display properly.

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