# How to overlay an image on a video?

**URL:** https://community.imagekit.io/t/how-to-overlay-an-image-on-a-video/71
**Category:** Video API
**Created:** [February 25, 2025, 3:13pm UTC](https://community.imagekit.io/t/how-to-overlay-an-image-on-a-video/71 "2025-02-25T15:13:42Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Pradita](https://avatars.discourse-cdn.com/v4/letter/p/5fc32e/32.png) [@Pradita](https://community.imagekit.io/u/Pradita)
#### Post date: [February 25, 2025, 3:13pm UTC](https://community.imagekit.io/t/how-to-overlay-an-image-on-a-video/71/1 "2025-02-25T15:13:42Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![imagekit\_kashish](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.imagekit.io/imagekit_kashish/32/8_2.png) [@imagekit\_kashish](https://community.imagekit.io/u/imagekit_kashish)
#### Post date: [April 8, 2025, 2:31pm UTC](https://community.imagekit.io/t/how-to-overlay-an-image-on-a-video/71/2 "2025-04-08T14:31:11Z")

</div>

ImageKit provides [URL based layer transformations](https://imagekit.io/docs/add-overlays-on-videos), 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](https://imagekit.io/docs/dam/overview) or in [external storage](https://imagekit.io/docs/integration/connect-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:

```auto
         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** :

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

```

**Image/logo you want to overlay** :

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

```

**Final Video URL with the Image Overlay** :

```auto
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](https://imagekit.io/docs/transformations#position-of-layer). Additionally, ImageKit supports a range of [transformations](https://imagekit.io/docs/add-overlays-on-videos#list-of-transformations-supported-on-image-overlay) on the overlaid image.

#### Example:

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

```auto
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](https://imagekit.io/docs/add-overlays-on-videos#add-video-over-video) 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](https://imagekit.io/docs/transformations#named-transformations). Once created, the named transformation can be applied to multiple base images seamlessly.