Skip to content
Astro Cloudinary

Getting Started with CldVideoPlayer

The CldVideoPlayer component helps to embed Cloudinary videos using the Cloudinary Video Player giving you a full customizable experience for your player.

Basic Usage

To add a video player, use the CldVideoPlayer component with the basic required props width, height, and src.

---
import { CldVideoPlayer } from 'astro-cloudinary';
---
<CldVideoPlayer
  src="<Public ID>"
  width="<Width>"
  height="<Height>"
/>

Customization

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

---
import { CldVideoPlayer } from 'astro-cloudinary';
---
<CldVideoPlayer
  src="<Public ID>"
  width="<Width>"
  height="<Height>"
  colors={{
    accent: '#ff0000',
    base: '#00ff00',
    text: '#0000ff'
  }}
  fontFace="Source Serif Pro"
/>

Player Events

For listening to player events for advanced interactions with:

---
import { CldVideoPlayer } from 'astro-cloudinary';
---
<CldVideoPlayer
  id="video-player-events"
  src="<Public ID>"
  width="<Width>"
  height="<Height>"
/>


<script>
const videoPlayer = document.querySelector(`#video-player-events`);


if ( videoPlayer ) {
  videoPlayer.addEventListener('cldvideoplayer:loadedmetadata', ((e: CustomEvent<{ detail: {} }>) => {
    console.log('cldvideoplayer:loadedmetadata', e.detail)
  }) as EventListener);


  videoPlayer.addEventListener('cldvideoplayer:play', ((e: CustomEvent<{ detail: {} }>) => {
    console.log('cldvideoplayer:play', e.detail)
  }) as EventListener);


  videoPlayer.addEventListener('cldvideoplayer:pause', ((e: CustomEvent<{ detail: {} }>) => {
    console.log('cldvideoplayer:pause', e.detail)
  }) as EventListener);
};
</script>

Learn More about CldVideoPlayer