Images & Media
Paste a URL, get the right player
The video field takes the link an author already has. Total CMS works out the provider, records the vendor's thumbnail and title, and renders a click-to-play embed from a single call.
The video field is for video hosted somewhere else. An author pastes the URL and optionally uploads a poster image. On save Total CMS resolves which provider the link belongs to, extracts the video id, records the vendor's own thumbnail and title, and works out the aspect ratio. Total CMS never stores or serves the video bytes through this field, so there is no upload limit, no transcoding and no bandwidth liability.
Eight hosted providers are recognised: YouTube — including youtu.be links, Shorts and playlists — Vimeo, Livid, Bunny, Cloudflare Stream, Loom, Wistia and Publitio. A URL ending in .mp4, .webm, .mov, .m4v or .ogv is treated as a direct file and renders as a native <video> element instead of an iframe. Anything else renders as a generic iframe with the author's URL exactly as pasted. A providers setting on the field restricts which are accepted, and a URL resolving outside that list is rejected with a validation error.
Templates use one call. cms.render.video() takes the object, an options array, and an optional ImageWorks array applied to an uploaded poster. By default it renders a facade: the poster with a play button, and the iframe loads only on click. The first hover or touch preconnects to the player's hosts, and the poster stays on screen until the iframe has loaded. On a page listing a dozen videos that is a dozen players' worth of weight not downloaded. Pass facade: false for an eager iframe; autoplay, loop, muted and controls are there when you need them.
Setup Default Collections creates a ready-made video collection alongside image and file — one video per object, for a library you reference elsewhere. Both the collection and the property default to video, so an object from it renders by id alone. A video property on your own schema is reached with a property option, and it behaves the same inside a card or a deck item using a dotted path.
Thumbnails are fetched only when they need to be. YouTube and Cloudflare thumbnails are derived from the URL with no network request; the other providers make a single oEmbed call, and only when the stored thumbnail is empty and the URL has actually changed. A failed fetch never blocks the save: the derived fields are left empty, and the fetch is retried the next time the URL changes.
What you get
Eight hosted providers
YouTube, Vimeo, Livid, Bunny, Cloudflare Stream, Loom, Wistia and Publitio, plus direct MP4 and WebM links rendered as a native video element.
Click-to-play by default
The poster renders with a play button and the iframe loads on click, so a page of a dozen videos does not download a dozen players.
Poster or vendor thumbnail
Upload a poster and it is served through ImageWorks; leave it empty and the provider's own thumbnail is used instead.
No bytes, no bandwidth
The field never accepts an upload. For video you host yourself, use a file field, which plays back with HTTP range support.
One call in a template
cms.render.video() renders the right player whether the value is a hosted URL, a direct media file, or a file field holding video.
In practice
One snippet
{# An object from the ready-made video collection #}
{{ cms.render.video('intro') }}
{# A video property on your own schema, poster resized through ImageWorks #}
{{ cms.render.video(post, {property: 'promo'}, {w: 1200, fm: 'webp'}) }}One call renders the provider's player, using the uploaded poster when there is one and the vendor's thumbnail when there is not.
FAQ
Common questions
Can I upload a video file?
Not through the video field, which never stores video bytes. Use a file field for video you host yourself — cms.render.video() renders that too, and playback supports HTTP range requests.
What happens if the provider's thumbnail fetch fails?
The object still saves. A failed fetch leaves the derived fields empty and is retried when the URL changes, not on every subsequent save of the same URL.
Can I restrict which providers authors may use?
Yes. The providers setting is an allow-list of provider ids, and a URL that resolves to a provider outside it is rejected with a validation error.
Does a video field work inside a deck or a card?
Yes. The stored shape is the same one level down, and it renders with a dotted property path such as hero.promo.
Related features
- ImageWorks On-the-fly resizing, cropping, format conversion and effects, cached automatically. Upload the original once and ask for what each template needs.
- 20+ built-in content types Blog, image, gallery, file, depot, text, number, date, toggle, color, url, email, svg and feed schemas ship built in. Bind one to a collection and edit.
- 36+ admin field types Rich text, dates, prices, colors, selects, lists, images, video, cards and decks — each with the right editor, the right storage shape and the right filters.
Want the details? Read the Video documentation →
Or keep browsing: every Total CMS feature →
Start Your Free 45-Day Trial