Breadcrumb Content

Main Content

CSS-Watermark

December, 23, 2014 | CSS

Several days ago I received a message from a friend requesting a quick and easy way to add a water mark to a video. I quickly directed her to iMovie or the Adobe suite tools. Unfortunately that was not an option. I told her that I would get back to her in about ten minutes. A while ago I came across a website that used a looping video for a background. I decided to implement the same concept but on a much smaller scale. I altered a .png file; I turned it down to 50% opacity and scaled it to about 120px by 60 px. I then created a container that would hold the video and watermark image.  I made sure that it’s positioned relative, to do otherwise would nullify the entire plan. I then placed the image in the container and used absolute positioning along with the z-index tag to make sure that it sits on top of the video. And Boom! I just created a CSS-Watermark with out having to edit video. See the code below for more details.

        * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
        .boxed
        {
        width:100%; max-width: 900px; margin: 100px auto 0px auto; position: relative;
        padding:7px !important; background:#e7b375; border: 1px #ddd solid;
        }
        
        .boxed video
        {width:100%; padding:0px; background: #e0e0e0; display: block; margin: 0px; z-index: -100; overflow: hidden;}
        
        .boxed video poster{display: block;}
        
        .boxed img.tagz
        {
         bottom: 35px; right:20px; opacity: .3; text-align:right;
        filter: alpha(opacity=30); z-index: 100; position: absolute;
        }

This is the HTML

    <div class="boxed">
        <img class="tagz" src="tagz.png" />
         <video id="mainVideo" poster="poster.png" width="100%" height="auto" preload="auto">
              <source src="BrooklynZoo.mp4" type="video/mp4" />
               <source src="BrooklynZoo.ogv" type="video/ogg" />
         </video>
       </div>

The “tagz dot png” file is the watermark and is positioned at the bottom right hand corner. The example you will see in the link I provided has additional features which I added from popcorn – a lightweight Javascript plugin for customizing the controls on the html5 video player.  BTW: this CSS styled watermark is primarily for show and will not appear on the video if it is downloaded. If you want to further protect or customize your content, you will have to hardcode it into your video file using a video editing tool.

View Demo

Mr. Blox

I dream in code, find conformity repulsive and drink excessive amounts of coffee...

Comments are closed.