Video effects and enhancements
Last updated: Sep-02-2024
Cloudinary's visual effects and enhancements are a great way to easily change the way your videos look and play within your site or application. For example, you can change the shape of your videos, blur them, apply quality improvements, make color adjustments, change the speed of playback, loop the video or add a progressbar and much more. You can also apply multiple effects to a video by applying each effect as a separate chained transformation.
Some transformations use fairly simple syntax, whereas others require more explanation - examples of these types of transformations are shown in the advanced syntax examples.
Besides the examples on this page, there are many more effects available and you can find a full list of them, including examples, by checking out our URL transformation reference.
Here are some examples of different effects and enhancements used on the same video:
e_progressbar
Reverse the videoe_reverse
Add visual noisee_noise:100
Simple syntax examples
Here are some examples of effects and enhancements that use a simple transformation syntax. Click the links to see the full syntax for each transformation in the URL transformation reference.
Background color
Use the background
parameter (b
in URLs) to set the color in the case of padding added with the "pad" crop mode. The color can be set as an RGB hex triplet (e.g. b_rgb:3e2222
), a 3 character RGB hex (e.g. b_rgb:777
) or a named color (e.g. b_red
). Cloudinary's client libraries also support a #
shortcut for RGB (e.g. setting background
to #3e2222
which is then translated to b_rgb:3e2222
). In this example, the landscape video is padded to a 300x300 square video a 'chocolate' colored background:
See full syntax: b (background) in the Transformation Reference.
Try it out: Background in the Transformation Center.
Blur
Use the blur
video effect to add a level of blurriness to a video. You can control the strength of the blur with a parameter (range: 1 to 2000). When working with video overlays, you can also add the blur to the container or to the overlay.
For example, the container video plays a blurred version of the video, while a smaller overlay plays the video clearly:
See full syntax: e_blur in the Transformation Reference.
Try it out: Blur in the Transformation Center.
pad
cropping option and set the background
value to blurred
. For details, see pad with blurred video background
Deshake
The deshake
video effect applies a filter that attempts to fix small changes in horizontal and vertical motion shift. This filter helps remove camera shake from hand-holding a camera, bumping a tripod, moving on a vehicle, etc. A value between 0-64 can also be specified that determines the maximum extent of movement in the horizontal and/or vertical direction in pixels, with the default set to 16 pixels.
In this example, the deshake effect is applied to a home video with the default max shift of 16 pixels:
See full syntax: e_deshake in the Transformation Reference.
Fade in/out
Use the fade
video effect to either fade in at the beginning of a video or fade out at the end. The effect accepts a parameter that determines the duration of the fade effect in milliseconds, with a positive value for fading in at the beginning of the video, and a negative value for fading out at the end of the video. In this example, the fade effect is applied first at the beginning of the video over 2 seconds and then at the end of the video over 4 seconds:
The fade
effect is also useful for fading in and out of video overlays. For example, adding an overlay of kitten_fighting
scaled to a width of 100 pixels to the mp4 video named dog
, starting from 2 seconds into the dog
video, fading in over 3 seconds, then out over 3 seconds:
You can fade in and out image overlays onto a video in a similar manner - just ensure to specify the duration for the image to display. For example:
- Ensure all fade effects for the overlay are specified between the
l_
andfl_layer_apply
components. - There are some known issues regarding the use of transparent images and fading in at a specific offset. If you encounter such issues, contact support.
Loop
Use the loop
effect to deliver a video that loops a specified number of times. The loop
parameter value indicates the number of times the video repeats (after the initial run).
loop
attribute of the HTML5 tag, which instructs the video player to play the delivered video in an infinite loop.loop
parameter when you convert a video to an animated GIF so that it will run infinitely (or a specified number of times). For details, see Delivering animated GIFs.See full syntax: e_loop in the Transformation Reference.
Playback speed
Use the accelerate
video effect to either speed up or slow down the video playback speed. The effect accepts an integer value between -50 and 100 that determines how to change the playback speed (in percent), with a positive value for speeding up the video, and a negative value for slowing down the video. In this example, the video is accelerated by 100% (twice normal speed):
See full syntax: e_accelerate in the Transformation Reference.
Reverse
Use the reverse
effect to play a video or audio file backwards.
See full syntax: e_reverse in the Transformation Reference.
Vignette
Fade the edges of videos into the background using the vignette
effect.
See full syntax: e_vignette in the Transformation Reference.
Visual noise
Use the noise
video effect to add visual noise to a video. Noise is a random pattern superimposed on the video, visible as a random flicker of "dots" or "snow". The amount of noise added to the video is set by adding an integer value to the parameter, ranging from 0 (no noise) up to 100. In this example, the noise effect is added to the video with the max value of 100:
See full syntax: e_noise in the Transformation Reference.
Advanced syntax examples
In general, most of the effects and enhancements can take an additional option to tailor the effect to your liking. For some, however, you may need to provide additional syntax and use some more complex concepts. It is important to understand how these advanced transformations work when attempting to use them. The sections below outline some of the more advanced transformations and help you to use these with your own assets.
Remember, there are many more transformations available and you can find a full list of them, including examples, by checking out our URL transformation reference.
3D LUTs
3D lookup tables (3D LUTs) are used to map one color space to another. They can be used to adjust colors, contrast, and/or saturation, so that you can correct contrast of flat footage, fix a camera's inability to see a particular color shade, or give a final finished look or a particular style to your video.
After uploading a .3dl
file as a raw
file, you can apply it to any video using the lut:
property of the overlay
parameter ( l_lut:
in URLs), followed by the LUT public ID (including the .3dl
extension).
Below you can see the dog.mp4
video file in it's original color, compared to the video with different LUT files applied.
AI-based video preview
A video preview is a short excerpt from a video that can be used to engage your audience and help them select the video content that interests them.
The preview
transformation effect (e_preview
in URLs) generates video previews automatically by activating deep learning algorithms that identify the most interesting video segments. You can optionally control the length of the generated preview using the duration
option (default: 5 seconds), and the number and duration of the video segments using the max_seg
and min_seg_dur
parameters. The three parameters are separated with a colon.
The default number of segments changes if you specify a longer duration, the table below shows the default values:
Preview duration | Max segments | Minimum segment duration |
---|---|---|
up to 5 seconds | 1 | = duration |
6 to 10 seconds | 3 | 3 seconds |
11 to 15 seconds | 4 | 3 seconds |
16 to 20 seconds | 5 | 4 seconds |
21 seconds and greater | 6 | 5 seconds |
The following transformation generates a single 5 second preview of this video of elephants walking:
The following transformation generates a 12 second preview with a maximum of 3 segments and a minimum segment duration of 3 seconds from this ImageCon lecture about responsive images by Jason Grigsby:
See full syntax: e_preview in the Transformation Reference.
Try it out: Video preview in the Transformation Center.
Code explorer: Thumbnail previews and embedded video player
A common use-case for video previews is to display a selection of different videos as thumbnails, which display a short video preview on hover and open the full video in a video player on click.
The following code explorer demonstrates this use case where any clicked thumbnail plays in a <div>
containing the Cloudinary Video Player. Open the index.html or script.js tabs to see the code behind this demo.
This code is also available in GitHub.
Return video importance histogram
As part of generating the preview, a video importance histogram is created. This histogram is a JSON representation of the importance score for each frame of the video. You can return this histogram and pass it to an external application or to pick out your own key parts of a video using the importance scores.
To return the histogram, use the fl_getinfo
flag with e_preview
and remove the file extension. Ensure that you don't include any other transformations. For example, to return the importance histogram for the ImageCon video we used above:
Video preview tips and guidelines
The preview algorithm analyzes the entire video to determine the ideal segment(s) to use, which means it can take several seconds or minutes, depending on the length of the original video, to generate your preview. Therefore, it's recommended to generate the preview effect transformation eagerly during upload or using an explicit method call for existing videos, along with an
eager_notification_url
parameter to notify your application when the video preview transformation is ready for delivery.Due to the advanced analysis required, video preview generation is not supported as an incoming transformation.
As explained above, dynamic delivery of this transformation is not relevant in production. However, for experimentation purposes, you can add the
e_preview
parameter directly to a URL in your browser. In most cases, the immediate result will be a broken video (AnHTTP 423
error will be returned). Refresh your browser after several seconds or minutes to see the result. Once the initial analysis has been completed, any subsequent transformations will happen on the fly as usual.When generating video previews, keep in mind that the AI algorithm takes the requested preview duration into account when selecting the most relevant content. Therefore, when you set a different preview duration for the same video, different segments of your video may be selected.
-
As with any video, you can transcode your generated preview to an animated image (.gif or animated .webp) by changing the URL extension or using the
format
SDK parameter. Remember that animated images that were transcoded from video (and thus have aresource_type
ofvideo
) only run a single time by default. If you want the animated image to loop, add a new component to your transformation chain with theloop
effect. For example:
Boomerang
A boomerang video is a (usually very short) video clip that plays forwards and then backwards. This effect has become quite popular on many social media and video editing apps. You can create a boomerang effect on any video by adding the boomerang
effect to your transformation.
To ensure your video is short enough to produce the desired effect, you can use the boomerang
effect in conjunction with the duration
, start_offset
, or end_offset
trimming parameters. Keep in mind that the total length of a single repetition of the boomerang effect will be double the length you set for the video using the trimming parameters.
By default, the boomerang effect runs a single time. To get the repetitive effect that is characteristic of boomerang videos, you need to add looping functionality. To do this, you can either:
Include the HTML5
loop
attribute in the relevant video_tag SDK method call or when embedding a Cloudinary video player in your webpage. If delivering your boomerang clip in a video format, this is the recommended method.Use the loop transformation effect. If delivering your boomerang video as an animated GIF, this is the recommended method.
For example, the following transformation delivers a selected 2 second clip of the snow_deer
video as an animated GIF with an infinitely looping boomerang effect:
![Boomerang animated GIF Boomerang animated GIF](https://res.cloudinary.com/demo/video/upload/eo_5.0,so_3.0/e_boomerang/e_loop/w_350/snow_deer.gif)
See full syntax: e_boomerang in the Transformation Reference.
Borders
Add a solid border around videos with the border
parameter (bo
in URLs). The parameter accepts a value with a CSS-like format: width_style_color
(e.g., 3px_solid_black
).
An opaque color can be set as an RGB hex triplet (e.g., rgb:3e2222
), a 3-digit RGB hex (e.g., rgb:777
) or a named color (e.g., green
).
You can also use a 4-digit or 8-digit RGBA hex quadruplet for the color, where the 4th hex value represents the alpha (opacity) value (e.g., co_rgb:3e222240
results in 25% opacity).
Additionally, Cloudinary's client libraries also support a #
shortcut for RGB (e.g., setting color to #3e2222
which is then translated to rgb:3e2222
), and when using Cloudinary's client libraries, you can optionally set the border values programmatically instead of as a single string (e.g., border: { width: 4, color: 'black' }
).
For example, the uploaded MP4 video named sunglasses delivered with a 5 pixel blue border:
Borders are also useful for adding to overlays to clearly define the overlaying image, and also automatically adapt to any rounded corner transformations. For example, the base video given rounded corners with a 10 pixel grey border, and an overlay of the image of sale
resized to a 100x100 thumbnail added to the northeast corner:
See full syntax: bo (border) in the Transformation Reference.
Progress indicator
Use the progressbar
effect (e_progressbar
in URLs) to add a progress indicator overlay to your videos. This can be used to show video progress when a video is played inline and the controls are hidden. You can customize the indicator using the type
, color
and width
parameters:
-
type
- Specifies the type of progress indicator to overlay.-
bar
- Draws a single progress bar across the bottom of the video, starting on the left and ending on the right. Default. -
frame
- Draws a frame around the video, starting in the bottom left and going both ways around the video, ending in the top right.
-
-
color
- Specifies the color of the indicator. It can be specified as an RGB hex triplet (e.g.3e2222
) or a named color (e.g. green). Default: Red. -
width
- Specifies the width (in pixels) of the indicator. Default: 10px.
Parameter values will be evaluated in the following specific order: [type]:[color]:[width]
; therefore to set the color or width, you must also specify the value(s) to the left. Alternatively, you can set named parameters (in any order), with the parameter name and value separated by an underscore (_
): [type_<type>]:[color_<color>]:[width_<width>]
.
For example, to add an olive green frame type progress indicator (using the RGB color that matches the dress color code) with a width of 12 pixels to the video of a dog (click video to play):
or using the more verbose syntax:
Here's another video this time applying a green bottom bar indicator that is 6 pixels wide:
See full syntax: e_progressbar in the Transformation Reference.
Rotation
Rotate a video by any arbitrary angle in degrees with the angle
parameter (a
in URLs). A positive integer value rotates the video clockwise, and a negative integer value rotates the video counterclockwise. If the angle is not a multiple of 90 then a rectangular bounding box is added containing the rotated video and empty space.
Other possible rotation values instead of an integer value include:
-
auto_right
- Rotate the video 90 degrees clockwise only if the requested aspect ratio does not match the video's aspect ratio. -
auto_left
- Rotate the video 90 degrees counterclockwise only if the requested aspect ratio does not match the video's aspect ratio. -
vflip
- Vertical mirror flip of the video. -
hflip
- Horizontal mirror flip of the video. -
ignore
- By default, the video is automatically rotated according to the EXIF data stored by the camera when the video was taken. Set the rotation to 'ignore' if you do not want the video to be automatically rotated.
.
). For example to horizontally flip the video and rotate it by 45 degrees: angle: hflip.45
Examples with the video with public ID: docs/hotel-slow-motion-waterfall
:
- Rotate the video by 90 degrees:
- Rotate the video by -20 degrees (automatically adds a bounding box):
- Vertically mirror flip the video and rotate by 45 degrees (automatically adds a bounding box):
- Crop the video to a 1:1 aspect ratio circle, then rotate the video by 30 degrees (automatically adds a bounding box) and finally trim the extra whitespace that was added:
See full syntax: a (angle) in the Transformation Reference.
Try it out: Rotate in the Transformation Center.
Rounding
Transforming a video to a rounded version is done using the radius
parameter (r
in URLs) set to the number of pixels the radius of all four corners should be. For example, the uploaded mp4 video named dog
resized to a width of 300 pixels and with rounded corners set to a radius of 30 pixels:
Cloudinary also supports cropping videos to the shape of an ellipse. Simply pass max
as the value of the radius
parameter. For example, the uploaded mp4 video named dog
resized to a width of 300 pixels and with maximum radius cropping:
You can also change the background color of the video from the default white color using the background parameter. If the width and height of the video are identical (i.e., the same value) then setting the radius parameter to max generates a circular video. For example, the uploaded mp4 video named dog
with width and height set to 300 pixels, and with maximum radius cropping using a blue background:
The radius parameter can also be used to round the corners of overlays, which are then also given a transparent background. For example, the uploaded mp4 video named dog
overlaid on the same video named dog
with width set to 100 pixels, maximum radius cropping and north east gravity:
See full syntax: r (round corners) in the Transformation Reference.
Try it out: Round corners in the Transformation Center.
Transparency
You can convert any relatively solid color in a video overlay to be fully transparent, thus making the base video visible in the transparent areas. This means you can remove plain colored backgrounds from a video overlay or remove a solid colored element from the subject of a video overlay, such that the content of the video behind that element shows through. This functionality works like a green-screen effect, but can be applied to any HEX color.
To make a color transparent in your video overlay, apply both the make_transparent
effect (e_make_transparent
in URLs) and the color
parameter (co_
in URLs) to your video overlay component. You can also specify a tolerance value for the make_transparent
effect to allow for minor differences in the shade of the specified color.
make_transparent
parameter is supported only for videos within an overlay component. You cannot apply this parameter to a video without an overlay.For example, suppose you have the following product video that was produced with a blue screen background:
You could use that product video as an overlay on top of a video showing a nice background scene. You could then make the blue background of your overlay video transparent using the make_transparent
parameter together with the color
parameter set to the Hex color #0e80d8 (the specific shade of blue used in this video).
w_0.6
and fl_relative
, along with g_north
in the URL above, which makes the overlay video 60% smaller than the background video and places the overlay over the north part of the background video, in order to get the desired effect.The make_transparent
parameter is not limited to removing backgrounds. For example, in the above video, instead of setting the transparency color to the blue background color, you could set it to the color of the green stripe inside the watches, and then the background video would show only in place of the green stripes.
(For this use case, w_1.0
, fl_relative
was used so that the overlay video would completely cover the background video, except where the overlay is transparent.)
See full syntax: e_make_transparent in the Transformation Reference.
Transparent delivery
Transparent videos provide a great way to display moving or animated content over the top of your web or mobile application design. For example, the video below has a water droplets background image set with CSS. Video transparency is currently only supported for direct delivery in the webm
format. As a result, the example video below will not display on browsers that don't support the webm
format and you'll see only the background or a broken video.
For browsers that don't support video transparency, you can use the Cloudinary JavaScript SDK to configure a fallback. The fallback checks if the browser is compatible and, if not, makes use of an HTML5 canvas element to deliver the video with transparency. The example below works across most modern browsers. You can see how the transparent video looks on top of the existing page by clicking the Toggle video position
button.
Cross-browser supported transparent videos
To add transparent videos that are supported on most browsers, you'll need to use the cloudinary-core
JavaScript library. Follow the get started instructions for how to add this to your website or application. To add a transparent video follow the steps below:
- Create an html
div
element on your page for the transparent video and give it anid
. -
In your JavaScript, create a new instance of Cloudinary using your cloud name. For example:
-
Inject the transparent video into the element that you created using the
injectTransparentVideoElement
method. The method takes theid
of the element, the public id of the transparent video and an options object to allow additional configuration, including any supported video transformations. For example:
Here's a full example of the code used to generate the example above:
Video thumbnails
Cloudinary makes it easy to extract a frame from a video and deliver it as an image by simply specifying the desired image format as the file extension of the URL (e.g. jpg, png, webp, avif), and optionally the desired frame (specified by a time offset from the start of the video). This is an effective way to produce a poster image for your video.
For example, generating a JPG image thumbnail URL of the uploaded MP4 video with public ID docs/walking_talking
:
![JPG thumbnail from walking_talking.mp4 JPG thumbnail from walking_talking.mp4](https://res.cloudinary.com/demo/video/upload/w_500/docs/walking_talking.jpg)
By default, the middle frame of the video is used. You can also control which frame is captured from the video as a thumbnail using the start offset qualifier (so
in URLs).
For example, generating a JPG image thumbnail of the frame at 8.5 seconds from the beginning of the MP4 video:
![JPG thumbnail of walking_talking.mp4 at 5.5 seconds JPG thumbnail of walking_talking.mp4 at 5.5 seconds](https://res.cloudinary.com/demo/video/upload/so_8.5/w_500/docs/walking_talking.jpg)
Another option is to let Cloudinary decide which frame to use as the thumbnail based on color distribution, using automatic start offset (so_auto
in URLs):
![Automatic thumbnail of walking_talking.mp4 Automatic thumbnail of walking_talking.mp4](https://res.cloudinary.com/demo/video/upload/so_auto/w_500/docs/walking_talking.jpg)
Once generated, the thumbnail image supports the same transformations as any other image (see image transformations for more details).
For example, generating an automatically cropped JPG image thumbnail with a width and height of 350 pixels, of an automatically selected frame in the uploaded MP4 video named walking_talking
. The image is also rendered in grayscale, with rounded corners and a 5 pixel wide black border, resulting in a 360 x 360 final image:
![360x360 JPG thumbnail of walking_talking.mp4 at 4 seconds 360x360 JPG thumbnail of walking_talking.mp4 at 4 seconds](https://res.cloudinary.com/demo/video/upload/so_auto/c_fill,g_auto,h_350,w_350/bo_5px_solid_black,r_20/e_grayscale/docs/walking_talking.jpg)