With ImageKit, you can add images, videos, text and subtitles over a video using layers. Skip to the relevant section to understand with a quick example:
- Add images over video
- Add text over video
- Add video over video
- Add solid color blocks over video
- Add subtitles over a video
Add images over video
You can add an image over a base video using the image layer (l-image
).
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
Input (i
or ie
) for l-image
can be JPG, PNG, WEBP, TIFF, or GIF files.
For example, let's add ImageKit's logo over a base video.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-image,i-logo.png,l-end
Notes
- To overlay videos stored within a specific folder of your media library, use the complete video path where slashes (
/
) are replaced with@@
. For example, if the overlay image is athttps://ik.imagekit.io/demo/path/to/overlay.jpg
, then it can be used as an overlay like:https://ik.imagekit.io/demo/base-video.mp4?tr=l-image,i-path@@to@@overlay.jpg,l-end
- When a GIF file is used in the image layer, the 1st frame of the GIF is used as a static image. For animated GIF, you can use video layer (
l-video
).
When a GIF file is used in the image layer, the 1st frame of the GIF is used as a static image. For animated GIF, you can use video layer (l-video
).
Animated-WebP and animated-PNG (apng
) are not supported in ImageKit's video API.
Control time & position of image overlay
You can control the image layer position using the lx
and ly
parameters. Learn more about positional parameters in layers.
For example, let's align the logo to the left of the video using lfo-left
.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-image,lfo-left,i-logo.png,l-end
You can also use lso
, leo
, and ldu
to control the time at which the overlay should start, end, and the duration of the overlay.
Let's add the logo at 3 seconds and remove it at 8 seconds using lso-3,leo-8
.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-image,lso-3,leo-8,i-logo.png,l-end
Apply transformations on image overlay
Inside an image layer on the base video, you can apply these supported transformations to the image overlay before it is placed on the base video. You can chain the transformations one after other to achieve the desired outcome.
Let's resize the logo image to 100px width by adding w-100
inside the image layer.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-image,i-logo.png,w-100,l-end
List of transformations supported on image overlay
Parameter | Description |
---|---|
w | Width of overlay image. It can also accept arithmetic expressions such as bw_div_2 , or bw_sub_cw . Learn more about arithmetic expressions here. |
h | Height of overlay image. It can also accept arithmetic expressions such as bh_div_2 , or bh_sub_cw . Learn more about arithmetic expressions here. |
ar | Aspect ratio of overlay image. It can also accept arithmetic expressions such as iar_div_2 , or bar . Learn more about arithmetic expressions here. |
c | Cropping method. Accepts force , at_max , and at_least . |
cm | Crop mode. Supports extract and pad_resize . |
fo | Relative focus area used during cropping. Accpets center , top , left , bottom , right , top_left , top_right , bottom_left and bottom_right . |
b | This adds a border to the overlay image. It accepts two parameters - the width of the border and the color of the border in format b-<border-width>-<hex code> . It can also accept arithmetic expressions such as ih_div_20_red , or cw_mul_0.05_FF0000 . Learn more about arithmetic expressions here. |
bg | It is used to specify the background color in RGB Hex Code (e.g. FF0000) or an RGBA Code (e.g. FFAABB50) that must be used for the image. If you specify an 8-character background, the last two characters must be a number between 00 and 99, which is used to indicate the opacity level of the background. 00 represents an opacity level of 0.00 , 01 represents opacity level 0.01 , and so on. |
r | It is used to control the radius of the corner. To get a circle or oval shape, set the value to max . |
rt | It is used to specify the degree by which the overlay image must be rotated. |
Add text over video
You can add any text string over a base video using l-text
.
Syntax for adding text over video
URL endpoint Base video Text layer ┌──────────────────────────┐┌──────────────┐ ┌──────────────────┐ https://ik.imagekit.io/demo/sample-video.mp4?tr=l-text,i-hello,l-end
For using special characters in the text, refer to example here.
Notes
- Plain text input longer than 2000 characters will be truncated.
- The base64 string should be made URL-safe to ensure that all padding characters(=) are included correctly. In Javascript, a function like
encodeURIComponent()
can be used for this. - Base64 encoded text input longer than 2500 characters will be truncated.
Let's add "Hello" text over a base video. We will also use fs-100,co-red
to set the font size to 100 and color to red.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-text,i-hello,fs-100,co-red,l-end
Control time & position of text overlay
You can control text layer position using the lx
and ly
parameters. To change the direction, negative values are also supported by prefixing the value with 'N'.
Learn more about positional parameters in layers.
Let's align the text to the left of the video using lfo-left
.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-text,lfo-left,i-hello,fs-100,co-red,l-end
We can use lso
, leo
, and ldu
to control the time at which the overlay should start, end, and the duration of the overlay.
Let's add the text at 3 seconds and remove it at 8 seconds using lso-3,leo-8
.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-text,lso-3,leo-8,i-hello,fs-100,co-red,l-end
Apply transformations on text overlay
You can control the width, font size, font family, color, inner alignment, padding, transparency level, typography, background color, corner radius, line height of the text overlay using these supported transformations parameters.
For example, let's add a white background with padding and a bigger font size.
You can add padding to the text overlay using the pa parameter. The padding can be controlled individually for each side using the CSS shorthand notation. Refer to text in image overlay for more examples.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-text,i-hello,fs-100,co-red,bg-FFFFFF,pa-20,l-end
List of supported text transformations in text layers
Parameter | Description |
---|---|
w | Width of the whole text layer. It can also accept arithmetic expressions such as bw_div_2 , or bw_mul_0.8 . Learn more about arithmetic expressions here. |
fs | Font size. It can also accept arithmetic expressions such as bh_div_20 , or bh_mul_0.05 . Learn more about arithmetic expressions here. |
ff | It is used to specify the font of the overlaid text on the image. You can choose any font from this list or use a custom font. |
co | It is used to specify the color and transparency of the overlaid text on the image. It accepts RGB Hex Codes (e.g. FF0000 ), or RGBA Codes (e.g. FFAABB50 ), or color names (e.g. red ). If you specify an 8-character background, the last two characters must be a number between 00 and 99 , which indicate the opacity level of the background. 00 represents an opacity level of 0.00 , 01 represents an opacity level of 0.01 , and so on. |
ia | Inner alignment. Accepts left , right and center . The default value is center . |
pa | Padding. It can also accept arithmetic expressions such as bw_mul_0.05 , or bw_mod_5 . Learn more about arithmetic expressions here. |
al | Alpha |
tg | Typography. Supports bold b , italics i , and bold with italics b_i . |
bg | It is used to specify the background color in RGB Hex Code (e.g. FF0000) or an RGBA Code (e.g. FFAABB50) that must be used for the video. If you specify an 8-character background, the last two characters must be a number between 00 and 99, which is used to indicate the opacity level of the background. 00 represents an opacity level of 0.00 , 01 represents opacity level 0.01 , and so on. |
r | It is used to control the radius of the corner. To get a circle or oval shape, set the value to max . |
lh | It is used to specify the line height(spacing) of the text. It will come into effect only if the text wraps over multiple lines. Accepts integer values representing line height in points. It can also accept arithmetic expressions such as bw_mul_0.2 , or bh_div_20 . Learn more about arithmetic expressions here. |
Add video over video
You can add a video or a GIF over a base video using the video layer l-video
.
Syntax for adding video over video
URL endpoint Base video Video layer ┌──────────────────────────┐┌────────────┐ ┌──────────────────────────────┐ https://ik.imagekit.io/demo/sample-video.mp4?tr=l-video,i-sample-video.mp4,l-end
For example, let's overlay the video over itself. We are also resizing the video to 400px width so that the overlay effect is visible.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-video,i-sample-video.mp4,w-400,l-end
Notes
- All supported video formats & GIF can be used a input (
i
orie
) for video layer. Animated-WebP and animated-PNG (apng
) are not supported in ImageKit's video API. - For a nested path, replace
/
with@@
.
Control time & position of video overlay
You can control video layer position using the lx
and ly
parameters. Learn more about positional parameters in layers.
For example, let's align the video to the left of the video using lfo-left
.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-video,i-sample-video.mp4,w-400,lfo-left,l-end
You can also use lso
, leo
, and ldu
to control at what time the overlay should start, end, and the duration of the overlay.
Let's add the video at 3 seconds and remove it at 8 seconds using lso-3,leo-8
.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-video,lso-3,leo-8,i-sample-video.mp4,w-400,l-end
Apply transformations on video overlay
You can transform the layered video using any supported video transformation parameter in ImageKit except sr
.
Let's resize the video to 400px width by adding w-400
inside the video layer.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-video,i-sample-video.mp4,w-400,l-end
Add solid color blocks over video
You can add solid color blocks over a base video using the following example.
Syntax for adding solid color blocks over video
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-image,i-ik_canvas,bg-red,l-end
Let's add a solid red color block over a base video.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-image,i-ik_canvas,bg-red,l-end
Control time & position of solid color block overlay
You can control the position of the solid color block overlay using the lx
and ly
parameters. Learn more about positional parameters in layers.
For example, let's align the solid color block to the left of the video using lfo-left
.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-image,i-ik_canvas,bg-red,lfo-left,w-500,l-end
You can also use lso
, leo
, and ldu
to control at what time the overlay should start, end, and the duration of the overlay.
Let's add the solid color block at 3 seconds and remove it at 8 seconds using lso-3,leo-8
.
Apply transformations on solid color block overlay
The following transformation parameters are supported on the solid color block overlay inside a layer.
Parameter | Description |
---|---|
w | Width of solid color block. It can also accept arithmetic expressions such as bw_div_2 , or bw_mul_0.8 . Learn more about arithmetic expressions here. |
h | Height of solid color block. It can also accept arithmetic expressions such as bh_div_2 , or bh_mul_0.8 . Learn more about arithmetic expressions here. |
bg | It is used to specify the color of the block in RGB Hex Code (e.g. FF0000 ), or an RGBA Code (e.g. FFAABB50 ), or a color name (e.g. red ). If you specify an 8-character background, the last two characters must be a number between 00 and 99 , which indicates the opacity level of the background. 00 represents an opacity level of 0.00 , 01 represents an opacity level of 0.01 , and so on. |
al | It is used to specify the transparency level of the overlaid solid color layer. Supports integers from 1 to 9 . |
r | It is used to control the radius of the corner. To get a circle or oval shape, set the value to max . |
If both bg
and al
are set in a single transformation and bg
has an alpha component, then that value is used to set solid color background transparency. Otherwise, al
value is used. If bg
is set to a standard color name (e.g. blue
), then the al
value is ignored.
Add subtitles over a video
You can overlay subtitles on a base video using the l-subtitles
layer in ImageKit's VideoAPI.
Syntax for adding subtitles over video
URL endpoint Base video Subtitles layer ┌──────────────────────────┐┌───────────────┐ ┌──────────────────────────────┐ https://ik.imagekit.io/demo/sample-video.mp4?tr=l-subtitles,i-english.srt,l-end
Supported subtitle file types
- SRT (SubRip Subtitle)
- ASS (Advanced SubStation Alpha)
- WebVTT (Web Video Text Tracks)
Limitations
For complex styling within subtitle files, we recommend using ASS subtitles. ImageKit fully supports all Advanced SubStation Alpha styling options.
While SRT and WebVTT formats are supported, their styling capabilities are limited. Advanced CSS styles in WebVTT may cause issues and not produce the intended output. For styling SRT and WebVTT subtitles, use the styling options available in l-subtitles
.
Styling controls for subtitles layer
Property | Description |
---|---|
bg | Specifies the subtitle background color using a standard color name, an RGB color code (e.g., FF0000), or an RGBA color code (e.g., FFAABB50). |
fs | Sets the font size of subtitle text. |
ff | Sets the font family of subtitle text. You can choose any font from this list. |
co | Sets the font color of the subtitle text using a standard color name, an RGB color code (e.g., FF0000), or an RGBA color code (e.g., FFAABB50). |
tg | Sets the typography style of the subtitle text. Supports values are b for bold, i for italics, and b_i for bold with italics. |
fol | Sets the font outline of the subtitle text. Requires the outline width (an integer) and the outline color (as an RGB color code, RGBA color code, or standard web color name) separated by an underscore. Example: fol-2_blue (outline width of 2px and outline color blue), fol-2_A1CCDD (outline width of 2px and outline color #A1CCDD ) and fol-2_A1CCDD50 (outline width of 2px and outline color #A1CCDD at 50% opacity). |
fsh | Sets the font shadow for the subtitle text. Requires the shadow color (as an RGB color code, RGBA color code, or standard web color name) and shadow indent (an integer) separated by an underscore. Example: fsh-blue_2 (shadow color blue, indent of 2px), fsh-A1CCDD_3 (shadow color #A1CCDD , indent of 3px), fsh-A1CCDD50_3 (shadow color #A1CCDD at 50% opacity, indent of 3px). |
RGBA Color
If you specify an 8-character RGBA color code, the last two characters must be a number between 00
and 99
, which indicates the opacity level. 00
represents an opacity level of 0.00
, 01
represents an opacity level of 0.01
, and so on.
Examples:
FFAABB00
- ColorFFAABB
with0%
opacity (fully transparent).FFAABB50
- ColorFFAABB
with50%
opacity.FFAABB99
- ColorFFAABB
with99%
opacity (almost fully opaque).
Examples
Add background behind subtitle text with bg
parameter in subtitles layer:
Add background with standard color name purple
.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-subtitles,i-english.srt,bg-purple,l-end
Add background with RGB color value AABBAA
.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-subtitles,i-english.srt,bg-AABBAA,l-end
Add background with reduced opacity using aplha component.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-subtitles,i-english.srt,bg-AABBAA50,l-end
In bg-AABBAA50
, RGB color is AABBAA
and the alpha value is 50
(50% opacity)
Customize basic subtitle font properties using the fs
(font size), ff
(font family), co
(color) and tg
(typography) parameters in subtitles layer:
Set font size to 32
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-subtitles,i-english.srt,fs-32,l-end
Set font family to Lora
with ff
parameter.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-subtitles,i-english.srt,ff-Lora,l-end
Set font color to orange
with co
parameter.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-subtitles,i-english.srt,co-orange,l-end
Set font style to bold with tg
parameter.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-subtitles,i-english.srt,tg-b,l-end
Apply font outline using fol
parameter in subtitles layer:
Apply font outline of 2px width and blue
color to the subtitles.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-subtitles,i-english.srt,fol-2_blue,l-end
Apply a font outline with a 4px width and the color in RGBA format 0000FF65 to the subtitles.
In RGBA color 0000FF65
, the RGB component is 0000FF
(the RGB color code for blue) and the alpha value 65
(65% opacity).
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-subtitles,i-english.srt,fol-4_0000FF65,l-end
Apply text shadow using fsh
parameter in subtitles layer:
Apply a text shadow of color darkgray
and 3px indent.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-subtitles,i-english.srt,fsh-darkgray_3,l-end
Apply a text shadow of RGBA color A9A9A950
and 3px indent.
In RGBA color A9A9A950
, the RGB component is A9A9A9
(that is RGB color code for darkgray) and the alpha value 50
(50% opacity).
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-subtitles,i-english.srt,fsh-A9A9A950_3,l-end
Set subtitle alignment in subtitles layer
You can set subtitle alignment relative to the video frame using lfo
parameter. Supported values are: top_left
, top
, top_right
, left
, center
, right
, bottom_left
, bottom
, bottom_right
.
Examples
Align the subtitles to the center of the video.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-subtitles,i-english.srt,lfo-center,l-end
Align the subtitles to the top-right of the video.
https://ik.imagekit.io/demo/sample-video.mp4?tr=l-subtitles,i-english.srt,lfo-top_right,l-end