How To Create A Video Overlay In React

Do you ever wonder what makes some videos playback better than others? It can be difficult to pinpoint, but these videos simply feel like they’re doing something that makes them appear more special. Video overlays can play a part in that, as they provide great context to videos, changing their entire dynamic.

In this article, you’ll learn all about video overlays; what they are, their uses, how to implement them in React, and how to dynamically add them to specific locations within your videos using third-party API services like Cloudinary.

What is a video overlay?

A video overlay is when a video layer is added on top of another video. There are three kinds of overlays:

1. Image overlays
2. Text overlays
3. Video overlays

The reason to add overlays is so that the extra layer does not replace or cover the original video, but rather adds an extra element to the video to give it more texture and feel. For example, check out the image and image overlay below:

Source: https://clipify.net/how-to-overlay-a-picture-on-a-video.php

Adding a video overlay is a creative way to deliver your ideas. In addition, they help create content that helps connect with people.

Getting started

Before you start picking out elements or adding layers, you’ll need to decide on the best video editing framework for your needs. You can choose integrated tools like Adobe Premiere Pro or Final Cut Pro. Or, if you’re looking for a quick plug-and-play option, you can use an app like Flixier or Vimeo.

However, if you are looking to automate video overlay tasks, especially when using videos for apps, Cloudinary is the best platform to turn to.

Cloudinary is an end-to-end media management platform for websites and applications that enables you to quickly and easily convert your videos to any required format, style, and dimension, as well as apply effects and other visual enhancements. Cloudinary automatically optimizes your videos and delivers them with a small file size while maintaining high visual quality using less bandwidth and providing a better user experience.

So let’s get started and learn how to add video overlays in React!

How to create a React JS App with Cloudinary video transformations and overlays

1. Download and install Node.js on your system. For this tutorial you will need Node >= 14.0.0 and npm >= 5.6.

If you already have Node installed on your system, continue to step 2.

Create a React application

1. Create a React Application by running the following:

   npx create-react-app my-app

1. Navigate to your my-app directory and start the React application:

   npm start

Note: The create-react-app command does not handle backend logic or databases; instead, it creates a frontend build pipeline that can be used with any backend. As an added FYI, it uses Babel and webpack under the hood (but don’t worry, you won’t have to mess with these).

Cloudinary installation

1. To add your own assets, sign up free to Cloudinary (your account is free forever).
2. Install Cloudinary’s JavaScript and React packages using the NPM package manager:

   npm i @cloudinary/url-gen @cloudinary/react

Creating a basic React App

6. Navigate to the src directory in the my-app folder, open App.js, then, copy and paste the following:

import React from 'react'
import {Cloudinary} from "@cloudinary/url-gen";

const App = () => {

  // Create a Cloudinary instance and set your cloud name.
  const cld = new Cloudinary({
    cloud: {
      cloudName: 'demo'
    }
  });

};
export default App;

Here we’re setting cloudName to ‘demo’. You can set any configuration parameters using this method.

For the purposes of this article, you can also use the demo cloud by Cloudinary, but you’ll need to change this to your own cloud name to deliver your own assets.

Adding a video to our React app

The transformed video can then be viewed by multiple users even while encoded and delivered via CDN. You can also deliver pre-encoded videos with eager or explicit transformations. Cloudinary also supports HTTP progressive download for media players that support progressive download playback.

7. Before we can add an overlay, first add a video to the application and import several transformations:

import React from 'react'
import {AdvancedVideo} from '@cloudinary/react';
import {Cloudinary} from "@cloudinary/url-gen";
import {Transformation} from "@cloudinary/url-gen";

// Import required actions ad qualifiers.
import {scale} from "@cloudinary/url-gen/actions/resize";
import {source} from "@cloudinary/url-gen/actions/overlay";
import {Position} from "@cloudinary/url-gen/qualifiers/position";
import {compass} from "@cloudinary/url-gen/qualifiers/gravity";
import {fill} from "@cloudinary/url-gen/actions/resize";
import {byRadius} from "@cloudinary/url-gen/actions/roundCorners";
import {video} from '@cloudinary/url-gen/qualifiers/source';
...

8. Add a sample video to the app and apply the following transformations:

  const myVideo = cld.video('docs/walking_talking');

  // Apply the transformation.
  myVideo
   .resize(fill().width(400).height(400))
   .roundCorners(byRadius(20));

9. Using the resize method, let’s resize the sample video to a width and height of 400px. We can also round the corners of the video using the roundCorners method, and round them using byRadius with a pixel radius of 20.

10. We can then return the transformed video:

  // Render the transformed video in a React component.
  return (
    <div>
      <AdvancedVideo cldVid={myVideo} controls/>
    </div>
  )

Here is what our video looks like:

Adding video overlays using Cloudinary

Using the Cloudinary overlay video parameter (l video: in URLs) and the publicID (the unique identifier for an asset stored in Cloudinary) of a previously uploaded video, you can add another video as an overlay.

You can control when the video overlay appears using any combination of the three offset parameters. See Trimming Videos in the Cloudinary Documentation for more information on the parameters and their possible values.

You can also decide where it is placed on the base video by using gravity, offset, and other placement qualifiers.

11. Add a sample video to our React App and apply a simple video overlay:

myVideo.overlay(source(video("dog.mp4").transformation(
    new Transformation().resize(scale().height(100).width(200))
   )).position(new Position().gravity(compass("east"))));

The code adds an overlay of a video named 'dog' to the same mp4 video named 'walking_talking'. The overlay is scaled to a size of 100px in height 200px in width and set with a gravity of 'east'.

12. Return the rendered video in a React Component. Here is what the final code and output looks like:

import './App.css';

import React from 'react'
import {AdvancedVideo} from '@cloudinary/react';
import {Cloudinary} from "@cloudinary/url-gen";
import {Transformation} from "@cloudinary/url-gen";

// Import required actions.
import {scale} from "@cloudinary/url-gen/actions/resize";
import {source} from "@cloudinary/url-gen/actions/overlay";

// Import required qualifiers.
import {Position} from "@cloudinary/url-gen/qualifiers/position";
import {compass} from "@cloudinary/url-gen/qualifiers/gravity";

// Import required actions and qualifiers.
import {fill} from "@cloudinary/url-gen/actions/resize";
import {byRadius} from "@cloudinary/url-gen/actions/roundCorners";
import {video} from '@cloudinary/url-gen/qualifiers/source';

const App = () => {

  // Create and configure your Cloudinary instance.
  const cld = new Cloudinary({
    cloud: {
      cloudName: 'demo'
    }
  }); 

  const myVideo = cld.video('docs/walking_talking');

  // Apply the transformation.
  myVideo
   .resize(fill().width(400).height(400))
   .roundCorners(byRadius(20));
   
   myVideo.overlay(source(video("dog.mp4").transformation(
    new Transformation().resize(scale().height(100).width(200))
   )).position(new Position().gravity(compass("east"))));

  // Render the transformed video in a React component.
  return (
    <div>
      <AdvancedVideo cldVid={myVideo} controls/>
    </div>
  )
};
export default App;

13. Visit localhost:3000 to see the video overlays:

Here is our final output:

Conclusion

Congratulations on creating a video overlay in React using Cloudinary!

Cloudinary is a complete image and video management platform that takes the hassle out of managing your website’s media assets. Cloudinary delivers your media assets via an optimized content delivery network (CDN) further allowing you to manage your assets at scale. Try it out (it’s free forever!) and unleash the full potential of your digital media.

More from Cloudinary

• Cloudinary Digital Asset Management.
• Image transformation techniques.
• Cloudinary video tutorial library.