CldVideoPlayer Examples

Effects

• Default

  Basic settings to display a video.

  width="1620"
  height="1080"
  src="videos/mountain-stars"
• Crop & Resize

  Basic settings to display a video.

  width="1620"
  height="1080"
  src="videos/dog-running-snow"
• Transformation: overlay

  Adding a watermark to a video.

  src="videos/mountain-stars"
  transformation={{
    overlay: "assets:space-jelly-cosmo-helmet",
    width: 150,
    gravity: "south_east",
    x: 50,
    y: 50,
    opacity: 40
  }}
• Custom Player Colors & Font

  Changing the player theme using colors and fonts

  colors={{
    accent: '#ff0000',
    base: '#00ff00',
    text: '#0000ff'
  }}
  fontFace="Source Serif Pro"
• Custom Logo

  Adding a custom logo to the player chrome

  logo={{
    imageUrl: 'https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/v1676058142/assets/space-jelly-cosmo-helmet.svg',
    onClickUrl: 'https://spacejelly.dev'
  }}
• With Ref on Callback

  Using a ref to access the player instance

  playerRef={myPlayerRef}
  onMetadataLoad={() => {
    console.log('metadata-loaded');
    console.log(`duration: ${myPlayerRef.current.duration()}`);
  }}
  Note: the player instance is also passed in the callback function:

  onMetadataLoad={({ player }) => {
    console.log('metadata-loaded');
    console.log(`duration: ${player.duration()}`);
  }}