Video color effects

Adjust and transform the colors and appearance of your videos. You can set a background color, apply 3D LUTs, add borders, and make a color transparent for green-screen style effects.

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.

3-color-dimension LUTs (3D LUTs)

3-color-dimension lookup tables (known as 3D LUTs) map one color space to another. You can use them to adjust colors, contrast, and/or saturation, so that you can correct contrast, 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 or .cube 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 file extension (.3dl or .cube).

Below you can see the video in its original color, compared to the video with different LUT files applied.

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.

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: