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?
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.