How to Add a Watermark to a Video using Node.js?

Watermarking involves overlaying an image, text, or logo onto a video, for reasons such as branding a video, including captions, or integrating visual elements into existing video content. To add a watermark to a video using JavaScript, you'll need a video editing API. Here's how to do that using Node.js in just a few lines of code:

const Creatomate = require('creatomate');
const client = new Creatomate.Client('Your API Key');

client.render({
  source: new Creatomate.Source({
    outputFormat: 'mp4',
    elements: [
      new Creatomate.Video({
        source: 'https://cdn.creatomate.com/demo/mountains.mp4',
      }),
      new Creatomate.Image({
        source: 'https://cdn.creatomate.com/demo/logo.png',
        x: '100%',
        y: '0%',
        width: '60 vmin',
        height: '60 vmin',
        xPadding: '7 vmin',
        yPadding: '7 vmin',
        xAnchor: '100%',
        yAnchor: '0%',
        xAlignment: '100%',
        yAlignment: '0%',
        shadowColor: 'rgba(0,0,0,0.66)',
        fit: 'contain',
      }),
    ],
  }),
}).then((renders) => {
  console.log(renders);
});

How it works: As a first step, install the Creatomate package from NPM, which allows you to edit video directly from your Node.js code. In this example, we have two main components: the background video and a watermark image that will be placed on top of it. You have the flexibility to use any video or image file as long as it is accessible through a public accessible URL.

The watermark image, represented by a logo in this case, is positioned at the top-right corner of the scene. We achieve this by adjusting the "x" and "y" properties along with the "x_anchor" and "y_anchor" properties. Additionally, we add some padding between the logo and the video edges using the "padding" property.

Note that each property is defined using relative units like "vmin" and "%". This ensures that the overlay adjusts dynamically according to the background video, making it responsive and compatible with various video formats such as horizontal, vertical, or square videos.

To simplify the customization of these layout constraints, you can use the provided code video editor below. This online tool allows you to design your own unique video layouts and then export them as JSON for seamless integration into your Node.js applications.