AX - Video

Overview

AX - Video is a Lightning App Builder component that embeds video players on your record, app, and home pages—supporting YouTube, Vimeo, Salesforce Content Documents, and direct video file URLs.

Use it to display training content, product demos, how-to guides, or promotional videos right where users work in Salesforce. Pull video sources from field values to display different videos per record, and configure playback options such as autoplay, looping, and player controls directly in App Builder.

Perfect for embedded training materials, video libraries, product demonstrations, or onboarding content without redirecting users to external sites.

Getting Started

Use this simple tutorial to learn the basics of the Video component and start building your use cases.

Key features

• Multi-Source Support: Embed videos from direct MP4/WebM URLs, Salesforce Content Document IDs, YouTube, or Vimeo.
• Dynamic Bindings: Use {{Record.FieldApiName}} as the video source to show a different video per record.
• Playback Controls: Configure autoplay, looping, and whether native player controls are shown.
• Sizing: Set a custom width and height in pixels or other CSS units.
• Customization: Configurable header with title, caption, and icon, plus an optional card display.

Use Cases

Sales & Marketing

• Product demonstration videos on Product or Opportunity pages
• Customer testimonials on Account record pages
• Training videos for sales processes

Training & Onboarding

• Instructional content on User or Training record pages
• Process documentation with visual walkthroughs
• Safety training videos on Equipment or Site records

---

Configuration

Add the Video component to a Lightning record, app, or home page in App Builder and configure via the Properties Panel.

Properties

Label	Type	Default	Required	Description
Video Url or Content Document Id	String	—	Yes	The URL or ContentDocumentId of the video to display. Supports MP4, WebM, YouTube, and Vimeo sources. Example: https://example.com/video.mp4 or 069XXXXXXXXXXXX.
Auto Play	Boolean	false		If true, the video starts playing automatically when loaded. Useful for attention-grabbing content but should be used sparingly for accessibility.
Loop	Boolean	—		If true, the video will replay automatically after it ends. Ideal for short clips or looping background videos.
Hide Controls	Boolean	false		If true, hides the default video player controls (play, pause, volume, etc.), providing a cleaner or more guided viewing experience.
Width	String	—		The width of the video player in pixels or valid CSS units (e.g., 200px, 100%).
Height	String	—		The height of the video player in pixels or valid CSS units (e.g., 200px, 100%).
Header - Title	String	—		Text displayed as the main title in the component header
Header - Caption	String	—		Subheading text displayed below the header title to provide context.
Header - Icon Name	String	—		The Lightning Design System name of the icon (e.g., standard:photo).
Display as Card	Boolean	false		If true, displays the video inside a styled card container for better presentation in dashboards or record pages.

Vimeo Configuration Steps

You must configure Salesforce to trust these domains and utilize Vimeo URLs as video sources. Follow these steps:

1. In Salesforce Setup, navigate to Security | Trusted URL's.
2. Add the following URLs as trusted sites:

   • https://vimeo.com
   • https://*.vimeo.com
3. Enable the ALL the CSP directives for these sites:

This configuration ensures that your Avonni Video Player component can securely embed and play videos from Vimeo within your Salesforce

---

Use Case Examples

Example 1: Product Demo on the Product Page

Scenario: Display product demonstration videos specific to each opportunity with professional presentation for enhanced sales presentations.

Prerequisite:

• Create a ProductDemoURL__c field on the Product2 object to store the Content document Id

Steps

1

Navigate to Lightning App Builder

Edit your Product2 record page

2

Drag the AX - Video component onto the layout

3

Configure Video Source

• Set Video URL or Content Document Id to {{Record.ProductDemoURL__c}} (assumes custom field storing video URL)
• Leave Auto Play unchecked (respect user preferences and accessibility)
• Leave Loop unchecked (single viewing experience)
• Leave Hide Controls unchecked (allow user control over playback)

4

Customize Header

• Set Header Title to Product Demonstration
• Set Header Caption to {{Record.Name}} (displays current product name dynamically)
• Set Header Icon Name to standard:video
• Check Display as Card for professional presentation with styled container

5

Save & review

Result: A card-wrapped video player showing product demonstrations specific to each product, providing sales teams with contextual demo content.

Example 2: Knowledge Article Training Video

Scenario: Drive your user engagement and skills by adding training videos to you Knowledge base.

Prerequisite:

• Create a Video__c field on the Knowledge object to store the video URL

Steps

1

Navigate to Lightning App Builder

Edit your Knowledge record page

2

Drag the AX - Video component onto the layout

3

Configure Video Source

• Set Video URL or Content Document Id to {{Record.Video__c}} (assumes custom field storing video URL)
• Leave Auto Play unchecked (respect user preferences and accessibility)
• Leave Loop unchecked (single viewing experience)
• Leave Hide Controls unchecked (allow user control over playback)

4

Customize Header

• Set Header Title to Training session video
• Set Header Caption to This is a video for {{Record.Title}}
• Set Header Icon Name to standard:video
• Check Display as Card for professional presentation with styled container

5

Save & review

---

Key Considerations

• Performance: Use appropriate resolutions (720p for most business content), mind file sizes for direct URLs, and store frequently accessed videos as Content Documents.
• User Experience: Avoid auto-play in most scenarios, provide header titles and captions for context, and use card display to separate video from other content.
• Accessibility: Always include descriptive header titles, avoid hiding controls unless required, and add alternative descriptions in header captions.
• Mobile Responsiveness: Use percentage-based widths (100%) rather than fixed pixels, and test video display and header wrapping across screen sizes.

---

Troubleshooting Common Issues

• Video Not Loading: Verify the URL is accessible and correctly formatted; for Content Document IDs ensure the file exists and is permitted, and check external URLs aren't firewall-blocked.
• Controls Not Responding: "Hide Controls" intentionally disables them, external platforms may override control settings, and browser-specific issues can affect playback — test across browsers.
• Performance Issues: Optimize large video files, limit multiple video components per page, and consider thumbnail images that launch videos in modals on high-traffic pages.