<CldVideoPlayer />
Examples

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()}`);
    }}