To get the first frame from the video ik-thumbnail.jpg
after the video resource URL.
https://ik.imagekit.io/demo/sample-video.mp4/ik-thumbnail.jpg
Basic example
https://ik.imagekit.io/demo/img/sample-video.mp4/ik-thumbnail.jpg
Get thumbnail from a specific time point
To get the snapshot from a specific time point, use the so parameter.
https://ik.imagekit.io/demo/img/60cd.mp4/ik-thumbnail.jpg?tr=so-5
Transformations on video thumbnails
You can transform the output image using following transformation parameters. You can also add layers to add text and image overlay on top of the video thumbnail.
For example, to resize the thumbnail to 300px width, use the w
parameter.
https://ik.imagekit.io/demo/img/sample-video.mp4/ik-thumbnail.jpg?tr=w-300
Parameter | Description |
---|---|
w | Specify the width. |
h | Specify the height. |
ar | Aspect ratio of output, when either width or height is specified. |
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 image. It accepts two parameters - the width of the border and the color of the border in format b-<border-width>-<hex code> |
bg | It is used to specify the background that can be used along with some cropping strategies while resizing or applying border-radius (r ). You can choose either a solid color (using standard-browser-colors, RGB hex code, or RGBA hex code to specify color) or a blurred version of the image (using the syntax blurred[_<BlurIntensity>][_<Brightness>] ). Example: bg-red , bg-AAFF00 , bg-AAFF0010 , bg-blurred , bg-blurred_25_N15 . |
r | It is used to control the radius of the corner. To get a circle or oval shape, set the value to max . (Background color can be specified with bg parameter) |
so | Start offset of the video in seconds to pick thumbnail from a specific time point. |