Skip to content
Astro Cloudinary

getCldVideoUrl Examples

Basic Usage

Standard Cloudinary Video Player with playback.

---
import { getCldVideoUrl } from 'astro-cloudinary/helpers';
---
const url = getCldVideoUrl({
  src: "<PublicID>"
})

Transformations

Cloudinary provides the following transformations along with the getCldVideoUrl function.

Cropping & Resizing

Crop and resize the video to fit the container.

---
import { getCldVideoUrl } from 'astro-cloudinary';
---
const url = getCldVideoUrl({
  src: "<PublicID>",
  width: 500,
  height: 500,
  crop: 'fill',
  gravity: 'auto'
})

Text Overlays

Place text over the video (Ex: subtitles).

---
import { getCldVideoUrl } from 'astro-cloudinary';
---
const url = getCldVideoUrl({
  src: "<PublicID>",
  overlays: [
    {
      position: {
        x: 150,
        y: 125,
        angle: -20,
        gravity: 'south_east',
      },
      text: {
        color: 'magenta',
        fontFamily: 'Source Sans Pro',
        fontSize: 150,
        fontWeight: 'black',
        text: 'WITH STYLE'
      }
    },
    {
      position: {
        x: 140,
        y: 140,
        angle: -20,
        gravity: 'south_east',
      },
      text: {
        color: 'white',
        fontFamily: 'Source Sans Pro',
        fontSize: 150,
        fontWeight: 'black',
        text: 'WITH STYLE'
      }
    },
  ]
})

Image Overlays

Place an image over the video (Ex: watermarks).

---
import { getCldVideoUrl } from 'astro-cloudinary';
---
const url = getCldVideoUrl({
  src: "<PublicVideoID>",
  overlays: [
    {
      position: {
        x: 40,
        y: 40,
        gravity: 'north_east',
      },
      publicId: "<PublicPhotoID>",
      width: 150,
      height: 150
    }
  ]
})