CldVideoPlayer Configuration

General Props

Player visuals Props

Player Behavior Props

Video Config Props

Ads And Analytics Props

Missing an option from the Video Player docs (opens in a new tab) you'd like to see? Create an issue (opens in a new tab)!

Customization

Logo

The logo prop gives the option to customize the player's logo.

logo defaults to true, showing the Cloudinary logo and linking to https://cloudinary.com (opens in a new tab) when clicked.

When logo is set to false, no logo will be displayed.

To customize the logo, the following options are available in the form of an object:

Poster

The poster prop optionally takes a string or object to customize the generated poster.

When passing a string, you can either pass a Cloudinary Public ID or a remote URL to rendered the desired image.

When passing an object, use same configuration and API as getCldImageUrl to customize the image. You can either specify a src option with a custom public ID or omit the src, which will use the video's ID to render an automatically generated preview image.

View examples.

Text Tracks

The textTracks prop allows you to add captions or subtitles to the player.

Each Text Track is an object containing details about where the captions or subtitles should be loaded from as well as any customization of that track.

Examples

textTracks={{
  captions: {
      label: 'English',
      language: 'en',
      default: true,
      url: 'https://res.cloudinary.com/<Cloud Name>/raw/upload/<FileName>.vtt'
    }
  }
}}

Learn more on the Video Player Reference (opens in a new tab) or the Subtitles and Captions guide (opens in a new tab).

Theme Colors

The colors prop takes an object that can control what colors are used in the player:

Learn more about the color scheme options and how they're used on the Cloudinary docs (opens in a new tab).

Localization

You can add custom localization options to control the languages of the player provides labels in.

Uses Video.js JSON format for localization customization: https://videojs.com/guides/languages/#json-format (opens in a new tab)

Player APIs

Event Handlers

The event props allow you to pass in a function that is called whenever the associated event occurs.

For instance, in order to trigger an event whenever a video is paused:

<CldVideoPlayer onPause={({ player }) => {
  const duration = player.duration();
}} ... />

Refs

The playerRef and videoRef props give you the ability to pass in your own ref to gain access to both the Player instance as well as the HTML video element on which the player is mounted.

To do this, create a new Ref instance and pass that in as the value of the prop:

const myVideoRef = useRef();
...
<CldVideoPlayer videoRef={myVideoRef} ... />

Advanced

Configuration & Delivery

config

Allows configuration for the Cloudinary environment.

Examples

config={{
  cloud: {
    cloudName: '<Your Cloud Name>',
  }
}}

cname

The custom domain name (CNAME) to use for building URLs, requires secure: false.

Examples

cname="spacejelly.dev"

privateCdn

Set this parameter to true if you are an Advanced plan user with a private CDN distribution

Examples

privateCdn={true}

secureDistribution

The custom domain name (CNAME) to use for building URLs, requires secure: true.

Examples

secureDistribution="spacejelly.dev"

queryParams

Query parameters to append to video URL.

Examples

queryParams={{
  myParam: 'value'
}}