Add a Branding Watermark to Video With React

When displaying video on your site, adding your logo to the video makes the content look branded and more polished. In this tutorial, we’ll look at how we can automatically add our logo to a video using Cloudinary, and display it in a React component.

Upload your assets to Cloudinary.

First, upload the video and the logo to Cloudinary. The fastest way to do this is using the Cloudinary console.

For this tutorial, we’ll use the following video:

1https://res.cloudinary.com/jlengstorf/video/upload/mediajams/disappointed-coffee.mp4

And the following logo:

1https://res.cloudinary.com/jlengstorf/image/upload/mediajams/logo.png

By the end of this tutorial, we’ll place the logo image at the bottom right of the video to add branding.

Create a Video Component in React

Before we add the logo, let’s create a React component that displays our Cloudinary video.

1function Video({ cloudName, videoId, watermarkId }) {
2  // set up a Cloudinary URL to use your cloud name and display video
3  let videoSource = `https://res.cloudinary.com/${cloudName}/video/upload`;
4
5  // automatically adjust the quality and set the video to 600px wide
6  videoSource += "/q_auto,w_600";
7
8  // set the publicId to display the video as an MP4
9  videoSource += `/${videoId}.mp4`;
10
11  // add the full URL to a standard HTML5 video element
12  return (
13    <video controls>
14      <source src={videoSource} type="video/mp4" />
15    </video>
16  );
17}

The component, which we’ve named Video, accepts three values as props: cloudName, videoId, and watermarkId.

The cloudName should contain our Cloudinary cloud name, which is displayed at the top-right of the console.

The videoId will contain the video asset's public ID, which is the name of the file on Cloudinary, including any folders. Using our example video from above, the public ID is mediajams/disappointed-coffee.

Finally, the watermarkId will contain the public ID of the logo asset. In the logo file above, the public ID is mediajams/logo.

To set up our video, we build a Cloudinary URL that contains:

The public Cloudinary URL, https://res.cloudinary.com/
Our cloud name
The asset type, /video/upload/
Transformations to adjust the quality automatically, and resize to 600px wide: q_auto,w_600
The public ID of our video
A file type of MP4 using a file extension

Once we have the URL, we can add it as the src value in a video element, and return it from our component.

Add the logo to the bottom-right corner

Right now, we’re not using the watermark. To add that in, we need to include an overlay to the video.

Overlays in URLs are created by setting the public ID of the asset to overlay prefixed with l_. Cloudinary uses the / character to denote groups of effects, so we need to replace all / characters in the public ID with a colon (:).

Then, using the gravity transformation, we move the image to the bottom-right corner, set its width to 100px, and nudge it 20px away from the right and bottom edges.

1function Video({ cloudName, videoId, watermarkId }) {
2    // set up a Cloudinary URL to use your cloud name, and display video
3    let videoSource = `https://res.cloudinary.com/${cloudName}/video/upload`;
4
5    // automatically adjust the quality, and set the video to 600px wide
6    videoSource += "/q_auto,w_600";
7
8    // for watermarks, replace folder slashes with colons
9    const watermark = `l_${watermarkId.replace("/", ":")}`;
10
11+   // add the watermark to the bottom-right of the video,
12+   // and set it to 100px wide, offset 20px from the edges
13+   videoSource += `/${watermark},g_south_east,w_100,x_20,y_20`;
14+
15+   // set the publicId to display the video as an MP4
16+   videoSource += `/${videoId}.mp4`;
17
18    // add the full URL to a standard HTML5 video element
19    return (
20      <video controls>
21        <source src={videoSource} type="video/mp4" />
22      </video>
23    );
24  }

Display the branded video in a React component on screen.

Now that we have our Video component ready to add a logo watermark to our videos, we can render it on screen.

In any React app, we can use the component like this:

1function App() {
2  return (
3    <main>
4      <h1>Branded Video With React & Cloudinary!</h1>
5      <Video
6        cloudName="jlengstorf"
7        videoId="mediajams/disappointed-coffee"
8        watermarkId="mediajams/logo"
9      />
10    </main>
11  );
12}

Setting the cloud name, video public ID, and logo public ID will render a branded video on screen!