How to overlay an image on a video?

Video API
1

Can we also overlay images on a video? We have some product videos and we want to add our brand’s logo on the top left corner so that the logo shows up even if the video is used on other platforms. What is the best way to overlay this logo image on all our videos?

2

ImageKit provides URL based layer transformations, which allow you to add an image (such as your brand’s logo) as an overlay on top of a video. This functionality works seamlessly whether the video and overlay image are stored in the ImageKit Media Library or in external storage connected to ImageKit.

How It Works

Basic Syntax for Overlaying an Image on a Video

Add an image/logo over a base video using the image layer (l-image ), the syntax for adding images over video:

         URL endpoint         Base video                   Image layer
┌──────────────────────────┐┌────────────┐      ┌──────────────────────────────┐
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-image,i-ik_canvas,bg-red,l-end

Example:

Base Video URL:

https://ik.imagekit.io/demo/sample-video.mp4

Image/logo you want to overlay:

https://ik.imagekit.io/demo/logo.png

Final Video URL with the Image Overlay:

https://ik.imagekit.io/demo/sample-video.mp4?tr=l-image,i-logo.png,l-end

You can also control the position of the Image overlay using the positional parameters. Additionally, ImageKit supports a range of transformations on the overlaid image.

Example:

Overlay the image/Logo on the top-left corner of the video:

https://ik.imagekit.io/demo/sample-video.mp4?tr=l-image,i-logo.png,lfo-top_left,l-end

Points to consider when using the layered transformation:

  • You can also provide the overlaid image URL in base64 format using the ie parameter. This is useful when you want to encode the image path directly into the transformation string.
  • To overlay videos stored in a specific folder within your Media Library/External Storage, use the full video path with slashes (/) replaced by @@.
  • If a GIF is used as an image overlay, only the first frame will be used as a static image. For animated overlays, consider using the video overlay feature with the l-video parameter.
  • Animated WebP and animated PNG (APNG) formats are not supported by ImageKit’s video API.

For applying overlays to a large number of videos efficiently, the layer transformation can be templatized using Named Transformations. Once created, the named transformation can be applied to multiple base images seamlessly.