<CldVideoPlayer />
Basic Usage

Getting Started with CldVideoPlayer

The CldVideoPlayer component helps to embed Cloudinary videos using the Cloudinary Video Player (opens in a new tab) giving you a full customizable experience for your player.

Basic Usage

The basic required props include width, height, and src:

import { CldVideoPlayer } from 'next-cloudinary';
 
<CldVideoPlayer
  width="1920"
  height="1080"
  src="<Public ID>"
/>

Using the App Router in Next.js 13+? Add the "use client" directive at the top of your file.

import 'next-cloudinary/dist/cld-video-player.css';

Customization

You can further take advantage of features like customizing your player:

<CldVideoPlayer
  width="1620"
  height="1080"
  src="<Public ID>"
  colors={{
    accent: '#ff0000',
    base: '#00ff00',
    text: '#0000ff'
  }}
  fontFace="Source Serif Pro"
/>

Player Events

Or listening to player events for advanced interactions with:

<CldVideoPlayer
  width="600"
  height="600"
  src="<Cloudinary URL>"
  onMetadataLoad={({ player }) => {
    console.log(`duration: ${player.duration()}`);
  }}
  onPause={({ player }) => {
    console.log(`current time: ${player.currentTime()}`);
  }}
/>

Watch & Learn

View on YouTube

Learn More about CldVideoPlayer