Cloudinary Video Player

Lazy player (with poster URL)

Uses an explicit poster URL. Custom accent color and logo configured.

Load Player

Click the player or the button above to initialize. The button calls player.loadPlayer().

Scroll to load (auto-built poster)

No poster URL - built automatically from cloudName and publicId. Custom colors configured.

Scroll down - the player loads automatically when it enters the viewport.

Example code:

import { player as createPlayer } from 'cloudinary-video-player/lazy';
import 'cloudinary-video-player/cld-video-player.min.css';

// With explicit poster URL
const player = await createPlayer('my-video', {
  cloudName: 'demo',
  publicId: 'sea_turtle',
  poster: 'https://res.cloudinary.com/demo/video/upload/so_0,f_auto,q_auto/sea_turtle.jpg',
  lazy: true,
  colors: { accent: '#ff4081' }
});
// await player.loadPlayer();

// Auto-built poster from cloudName + publicId
createPlayer('my-video', {
  cloudName: 'demo',
  publicId: 'sea_turtle',
  lazy: { loadOnScroll: true },
  colors: { base: '#0d1b2a', accent: '#00b4d8' }
});