Dynamically Generating Videos in Node.js with Cloudinary

In many modern web applications, delivering personalized or optimized video content is becoming increasingly important. Imagine creating custom video compilations for users, combining multiple clips, or overlaying images without manually editing the original files. Doing this dynamically on the server ensures your videos are always up-to-date and tailored to your needs.

In this article, we’ll explore how to use Node.js and Cloudinary to generate dynamic videos. You’ll learn how to:

• Concatenate multiple videos together
• Include only specific parts of a video
• Overlay images on videos

All examples use the framework-agnostic @cloudinary/url-gen library, so the approach works for any Node.js application.

Watch the full tutorial here.

Enjoy!

🤔 Why use Cloudinary for dynamic videos?

Cloudinary makes it easy to generate custom videos on the fly, allowing you to combine multiple sources, overlay images, and apply transformations such as resizing and cropping — all without manually editing your original files. This approach is perfect for creating personalized video experiences or delivering optimized media to users.

🟢 Basic Concatenation of Videos

To concatenate one video to another in Cloudinary, we use the overlay concept. For example, we have two videos in the Cloudinary console: samples/sea-turtle and samples/elephants. We want to add the elephants video to the end of the sea turtle video.

We can accomplish this using the transformationStringFromObject utility function from @cloudinary/url-gen:

import { transformationStringFromObject } from "@cloudinary/url-gen";

const transformation = transformationStringFromObject([]);
myVideo.addTransformation(transformation);

Inside the array, we define objects responsible for resizing videos, creating the overlay, and applying flags:

[
  { height: 200, width: 300, crop: 'fill' },
  { flags: 'splice', overlay: 'video:samples:elephants' },
  { height: 200, width: 300, crop: 'fill' },
  { flags: 'layer_apply' },
]

Important: The overlay property uses video:samples:elephants. The video: prefix is required, and the colon replaces the folder slash in Cloudinary paths.

To display the second video at the start instead of the end, add the start_offset property:

{ flags: 'layer_apply', start_offset: "0" }

This way, the elephants video appears first in the custom video.

🟢 More Advanced Cases

Concatenate Only Part of a Video

To include only part of a video, set the duration and start_offset:

{ duration: "5", flags: "splice", overlay: "video:samples:elephants", start_offset: "0" }

This adds the first 5 seconds of the elephants video to the custom video.

Add an Image to a Video

To overlay an image on a video, first resize both elements to the same size, then specify the overlay image and duration:

{ width: 300, height: 200, crop: "pad" },
{ width: 300, height: 200, overlay: "cld-sample", flags: "splice", duration: "3" },
{ start_offset: "0", flags: "layer_apply" }

This approach ensures the image appears at the start of the video.

✅ Best Practices

• Use transformations for dynamic video generation rather than editing original files.
• Always maintain consistent sizes when combining multiple videos or adding overlays.
• Cleanly define offsets and durations to prevent unexpected results.
• Check Cloudinary documentation for advanced video transformations.

📖 Learn more

Check out Cloudinary’s official documentation about video trimming and concatenating to explore more transformations.

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

🧪 Advance skills

A certification boosts your skills, builds credibility, and opens doors to new opportunities. Whether you're advancing your career or switching paths, it's a smart step toward success.

Check out Certificates.dev by clicking this link or by clicking the image below:

Invest in yourself—get certified in Vue.js, JavaScript, Nuxt, Angular, React, and more!

✅ Summary

You’ve learned how to dynamically generate videos in Node.js using Cloudinary, including:

• Concatenating multiple videos
• Including only part of a video
• Overlaying images on videos

For more advanced use cases, consult the Cloudinary documentation to explore additional video transformations and optimizations.

Take care!

And happy coding as always 🖥️