Watermark overlays add visible branding or ownership marks on top of HTML5 video without modifying the video file. These overlays must be positioned carefully to remain visible while minimizing obstruction of the video content. Implementation methods include static CSS overlays, text-based watermarks, and dynamic overlays using the HTML5 canvas element.

Using CSS for Static Watermark Overlay

Positioning a watermark image over the video using CSS is a straightforward method that visually overlays the watermark without altering the video file itself. This technique relies on setting the container to position: relative and the watermark element to position: absolute within the container.

Example: Static Watermark with CSS

code
<div class="video-container">
<video controls width="640" height="360" src="video.mp4"></video>
<img src="watermark.png" alt="Watermark" class="watermark">
</div>
code
.video-container {
position: relative;
display: inline-block;
}

.watermark {
position: absolute;
bottom: 10px;
right: 10px;
opacity: 0.5;
pointer-events: none;
width: 100px;
height: auto;
}

Explanation:

  • The .video-container div is set to position: relative to establish a positioning context.
  • The .watermark image is absolutely positioned within the container, anchored to the bottom-right corner.
  • opacity controls the transparency to prevent the watermark from distracting viewers.
  • pointer-events: none ensures the watermark does not intercept mouse interactions intended for the video.
  • The watermark size is adjusted for visibility and non-intrusiveness.
Banner for Watermark

Adding Text-Based Watermark Using CSS

Text watermarks use a similar layering approach by placing a semi-transparent text element over the video container.

Example: Text Watermark

code
<div class="video-container">
<video controls width="640" height="360" src="video.mp4"></video>
<div class="watermark-text">?? 2025 CompanyName</div>
</div>
code
.watermark-text {
position: absolute;
top: 10px;
left: 10px;
color: white;
opacity: 0.4;
font-size: 14px;
font-weight: bold;
pointer-events: none;
user-select: none;
}

Explanation:

  • The text watermark is positioned in the top-left corner for subtle branding.
  • Styling includes semi-transparency (opacity), white color for contrast, and disabling text selection.
  • The watermark remains clickable-transparent due to pointer-events: none.

Dynamic Watermark Overlay with Canvas

For dynamic or time-based watermarks, the HTML5 <canvas> element can be used to render video frames along with overlays. This method composites the video and watermark into a single canvas output.

Example: Drawing Watermark on Canvas

code
<video id="video" src="video.mp4" width="640" height="360" controls></video> <canvas id="canvas" width="640" height="360"></canvas>
code
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const watermarkText = "?? 2025 CompanyName";

video.addEventListener('play', function () {
const draw = () => {
if (video.paused || video.ended) return;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
ctx.font = "20px Arial";
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.fillText(watermarkText, canvas.width - 180, canvas.height - 30);
requestAnimationFrame(draw);
};
draw();
});

Explanation:

  • The video frame is drawn onto the canvas on each animation frame while playing.
  • The watermark text is overlaid on the video frame at the bottom-right corner.
  • The semi-transparent white text is visible but does not obstruct video content significantly.
  • This approach allows dynamic watermarks and integration of timestamps or user info if required.

Considerations and Limitations

  • CSS overlays are non-destructive and cannot prevent screen capture or downloading but provide visible branding.
  • Canvas-based watermarking requires duplicating the video rendering and may introduce slight performance overhead.
  • Ensure watermark opacity and placement do not interfere with important visual content.
  • Watermarks added purely through HTML and CSS can be disabled by users via browser developer tools.