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"
  • 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'
    }}

MIT 2023 ©