Add a Video Bumper with React & Cloudinary

Jason Lengstorf

Custom bumpers at the beginning of videos can create a consistent experience that makes your content feel more professional and branded. In this tutorial, we’ll learn how to use Cloudinary to insert a bumper into any video. Then, we'll display the generated video in a React component.

Upload your assets to Cloudinary.

First, upload the videos to Cloudinary. The fastest way to do this is by using the Cloudinary console.

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

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

For the full video, we’ll use this one:

1https://res.cloudinary.com/jlengstorf/video/upload/mediajams/deploy-to-netlify.mp4

Once we’re finished, we’ll combine these two videos into a single video!

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, bumperId }) {
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 public ID 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 bumperId.

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

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

Finally, the bumperId will contain the public ID of the bumper video. For our bumper above, the public ID is mediajams/disappointed-coffee.

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

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

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

Add a bumper to our video

Inserting the bumper requires what’s known as splicing video. The splice flag tells Cloudinary to concatenate the videos instead of laying them over the top of each other, which is the default behavior for video overlays.

Setting the start offset transformation to '0' moves the bumper to the beginning of the video (by default it would be added to the end), and setting the crop to fill and the width to 600px ensures that the bumper is the same size as the video it’s being added to.

1function Video({ cloudName, videoId, bumperId }) {
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 overlays, replace folder slashes in public IDs with colons
9+ const bumper = bumperId.replace("/", ":");
10+
11+ // splice in the bumper video at the beginning
12+ // set it to the same width, and make sure it fills the space
13+ videoSource += `/l_video:${bumper},c_fill,w_600,fl_splice,so_0`;
14
15 // set the public ID 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

With our Video component ready to insert bumpers, we can use it!

In any React app, add the component like this:

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

The video that renders on-screen has a short bumper inserted at the beginning, allowing us to quickly level up the branding of any video we display on our site!

Jason Lengstorf

VP of Developer Experience at Netlify

Jason Lengstorf the VP of Developer Experience at Netlify, where he works to improve the experience of building and deploying to the modern web. He also hosts Learn With Jason, a live-streamed video show where he pair programs to learn something new in 90 minutes. He spends a lot of time telling people that the formula for success and happiness is to lift each other up and share what we learn. He is trying his very best to follow his own advice. He lives in Portland, Oregon.