Page 8 — Video Support and the Visualforce Bridge

YouTube, Vimeo, External Links, and Native Salesforce Files

Series: Build a Salesforce Guide App with AI Page: 8 of 10 Time to complete: 30–40 minutes Prerequisites: Page 7 complete

What You’re Doing in This Page

A screen recording showing exactly how to do something is often more useful than the same information written out. This page adds video support to guides — four types in total.

YouTube and Vimeo are the recommended approach for most teams. Unlisted YouTube videos and private Vimeo links keep the content internal without requiring any special Salesforce configuration beyond registering the domains as trusted.

External links let you link to any video hosted elsewhere — Loom, SharePoint, Confluence, or anywhere else — without embedding. The guide shows a link card the user clicks to open in a new tab.

Salesforce Files are for teams with compliance requirements where video can’t leave Salesforce. This requires a Visualforce bridge page because LWC can’t stream ContentDocument files directly. It works but requires more setup and is less reliable than hosted video — see the recommendation at the end of this page.

Step 1 — Register CSP Trusted Sites

Salesforce blocks external iframes by default. You need to explicitly whitelist YouTube and Vimeo before embedded videos will work.

Setup → Trusted URLs (type “Trusted” in Quick Find) → New for each:

Name	URL	Directive to enable
YouTube	`https://www.youtube.com`	frame-src
YouTubeNoCookie	`https://www.youtube-nocookie.com`	frame-src
Vimeo	`https://player.vimeo.com`	frame-src

💡 Why youtube-nocookie.com? YouTube’s privacy-enhanced embed mode uses a different domain. If you paste a YouTube embed URL that uses the nocookie variant, it will be blocked unless this domain is also registered.

Step 2 — Build the Visualforce Video Bridge

Skip this step if you don’t plan to use Salesforce Files as a video source.

Salesforce Files (ContentDocuments) can’t be streamed directly inside an LWC iframe because of security restrictions on the ContentDocument domain. The workaround is a Visualforce page that lives outside the LWC sandbox and renders an HTML5 video player directly.

💬 Prompt:

Build a Visualforce page called GuideVideoPlayer and its Apex controller GuideVideoPlayerController. The page:

Accepts a contentDocumentId URL parameter

Renders an HTML5 video player with controls=“controls” (must use this exact attribute form — Visualforce uses strict XML parsing and self-closing attributes like just “controls” will cause a parse error)

Dark background, centered player, responsive width

Shows a clear error state if the contentDocumentId parameter is missing or the ContentDocument isn’t found

The controller validates the ContentDocument exists and builds the streaming URL: /sfc/servlet.shepherd/document/download/{contentDocumentId}

Page attributes: showHeader=“false” sidebar=“false”

Generate the PowerShell script to write both files to:

force-app/main/default/pages/ for the VF page

force-app/main/default/classes/ for the controller

⚠️ VF XML is strict. Visualforce uses XML parsing, not HTML parsing. Boolean HTML attributes like controls, autoplay, and muted must be written as controls="controls" not just controls. A plain controls attribute will cause a deployment error. If Claude forgets this and you get a parse error on deploy, tell it: “Visualforce requires boolean attributes to have explicit values. Replace controls with controls="controls" throughout the page.”

After deploying, the video functionality in the guide editor handles the rest automatically. When an author pastes a ContentDocumentId (an ID starting with 069) into the video URL field, the editor auto-detects it as a Salesforce File. In the article view it renders as a dark thumbnail card with a play button that links to /apex/GuideVideoPlayer?contentDocumentId={id}.

How Video Type Detection Works

The saveVideos() Apex method and the editor both auto-detect the video type from the URL. The detection logic is:

Contains youtube.com or youtu.be → YouTube. Converts to embed format automatically.
Contains vimeo.com → Vimeo. Converts to embed format automatically.
Starts with 069 and is 15–18 characters long → Salesforce File (ContentDocumentId).
Anything else → External Link.

Authors don’t need to select the type manually — they paste the URL and the type badge updates instantly.

Recommendation on Video Hosting

For most teams, YouTube (unlisted) or Vimeo (password-protected or private link) is the right choice. The Salesforce File approach works but has limitations: it requires the VF bridge, the browser must be authenticated to Salesforce, and streaming large files via the shepherd servlet is less reliable than a proper video CDN.

Use Salesforce Files only if your compliance requirements genuinely prevent video from leaving Salesforce. For everything else, unlisted YouTube is free, reliable, and works without any ongoing maintenance.

Check Your Work

✅ CSP Trusted Sites registered for YouTube, YouTubeNoCookie, Vimeo
✅ A YouTube video embeds and plays correctly in a guide article
✅ External link cards open in a new tab
✅ (If using SF Files) GuideVideoPlayer VF page deployed and accessible

What’s Next

The app has video support. In Page 9 you’ll lock it down properly — creating the three permission sets that control who can read guides, who can author them, and who can approve them.

← Previous: Page 7 — Contextual Sidebar and Quick Action Modal Next → Page 9 — Permissions and the Security Model