Editor & Writing·3 min read·

Embedding YouTube and Vimeo with the VeloCMS editor

Two commands — /youtube and /vimeo — and your video is embedded, lazy-loaded, and responsive within seconds. Here's how it works and how to customise the embed for performance.

Embedding a YouTube or Vimeo video in the VeloCMS editor takes two steps: type the slash command (/youtube or /vimeo), paste the URL, and press Enter. The editor converts the URL to a responsive, lazy-loaded embed automatically. No iframes written by hand, no width/height attributes — the theme handles the aspect ratio with a CSS padding-top trick that makes every embed fill its container.

Embedding a YouTube video

On a new line, type /youtube. The slash palette opens and pre-selects the YouTube block. Press Enter or click it. A URL input field appears — paste your YouTube link in any format (full watch URL, short youtu.be link, or the embed URL). Hit Enter and the block renders as a preview thumbnail in the editor. On the published page, the video loads lazily — the iframe only initialises when the reader scrolls to within 200px of it, which prevents the YouTube embed from blocking your page's LCP score.

If you want the video to autoplay when it enters the viewport (muted, as browsers require), add ?autoplay=1&mute=1 to the YouTube URL before pasting. The embed block preserves query parameters.

Embedding a Vimeo video

The /vimeo command works identically. Vimeo URLs in any format are supported — vimeo.com/123456789, player.vimeo.com/video/123456789, or the share link from Vimeo's Share dialog. Vimeo Pro accounts can pass additional parameters like color and title=0&byline=0&portrait=0 to strip Vimeo branding — paste those directly in the URL field.

Performance implications

Both YouTube and Vimeo iframes load substantial third-party JavaScript — Google's consent management, Vimeo's player SDK, and analytics scripts. VeloCMS loads these lazily using IntersectionObserver, so they don't affect LCP or TBT for readers who don't scroll to the video. For posts where video is above the fold, consider placing a static thumbnail with a play button that initialises the iframe only on click — this is the lite-youtube-embed pattern and it scores better on Lighthouse than even lazy-loaded native iframes.