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>"
/>If you're using the Next.js 13 App Router, you must additionally import the Cloudinary Video Player stylesheet:
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()}`);
}}
/>