Video effects and enhancements

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:

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.

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 gets 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 a scaled down overlay to the bottom right corner, with a duration of 8 seconds, 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:

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

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 video in its 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:

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 (An HTTP 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 a resource_type of video) only run a single time by default. If you want the animated image to loop, add a new component to your transformation chain with the loop 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:

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

Examples with the video with public ID: docs/hotel-slow-motion-waterfall:

1. Rotate the video by 90 degrees:
   
2. Rotate the video by -20 degrees (automatically adds a bounding box):
   
3. Vertically mirror flip the video and rotate by 45 degrees (automatically adds a bounding box):
   
4. 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, resizing the video 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, resizing the video to a width of 300 pixels and with maximum radius cropping:

You can also change the background color of the video 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, resizing the video to a width and height of 300 pixels, and with maximum radius cropping using a blue background:

The radius parameter is also used to round the corners of overlays, which are then also given a transparent background. For example, overlaying a man talking video with width and height 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.

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

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.

Toggle video position

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:

1. Create an html div element on your page for the transparent video and give it an id.

2. In your JavaScript, create a new instance of Cloudinary using your cloud name. For example:

3. Inject the transparent video into the element that you created using the injectTransparentVideoElement method. The method takes the id 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:

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:

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):

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: