Documentation

Video Assets

Video fields in SleekCMS reference hosted video content. Videos are uploaded to a provider — Bunny.net by default — and SleekCMS stores the resolved metadata: source, video id, embed URL, and title. Your templates and frontend code render the video through the embed() helper.

This page covers how videos are added, the shape of video data, and how to render videos in templates and through the content API.

How Video Fields Work

A video field on a content model accepts a single video reference. Editors upload the file through the SleekCMS UI; the file is sent to the configured video provider (Bunny.net) and the resulting playback metadata is stored on the content record.

Videos are not uploaded as raw files into SleekCMS storage. The CMS only stores the reference to the hosted video — provider, video id, embed URL, and title — so the streaming and bandwidth costs sit with a dedicated video CDN built for that workload.

Do not write video field values by hand. The source, video_id, and embed_url are issued by the video provider on upload. Hand-rolling them or guessing them produces broken embeds. Upload through the editor and let the sync engine record the resolved object.

The Video Object

A video field value resolves to an object with this shape:

{
  "source": "BUNNY",
  "video_id": "...",
  "embed_url": "https://iframe.mediadelivery.net/embed/...",
  "title": "..."
}
Property Description
source Identifier for the hosting provider (e.g., "BUNNY").
video_id Provider-specific video identifier.
embed_url The iframe-ready embed URL provided by the host.
title The title set on the video during upload.

Rendering Videos in Templates

Always render videos with the embed() helper. It produces a provider-aware <iframe> with the right attributes — including allowfullscreen, allow="...", and dimensions — without you having to hand-craft markup.

<%- embed(item.intro_video) %>

<%- embed(item.intro_video, '1280x720') %>

<%- embed(item.intro_video, {
  autoplay: true,
  muted: true,
  loop: true
}) %>

<%- embed(item.intro_video, {
  size: '800x450',
  class: 'video',
  style: 'border-radius:8px'
}) %>

The attr parameter accepts either a "WxH" string or an object with w, h, size, autoplay, muted, loop, preload, t, class, and style.

Most browsers block autoplay unless the video is also muted — set both autoplay: true and muted: true together if you want videos to play automatically on page load.

Videos via the Content API

When fetching content through the API, video fields are returned as the same object shape stored in the content record:

const page = client.getPage('/about');
// page.intro_video → {
//   source: 'BUNNY',
//   video_id: 'a1b2c3d4',
//   embed_url: 'https://iframe.mediadelivery.net/embed/...',
//   title: 'Company intro'
// }

Your frontend renders the video using embed_url directly in an <iframe>:

<iframe
  src="{{ video.embed_url }}"
  allowfullscreen
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
></iframe>

For React, Vue, Svelte, or any other framework, the pattern is the same — drop the embed_url into an iframe and apply the layout styling your design calls for.

What's Next