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://svelte.cloudinary.dev/logo.svg',
    onClickUrl: 'https://svelte.cloudinary.dev'
  }}