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