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.

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

Property	Type	Required	Description	Example
Video URL or Content Document Id	Text	Yes	Source of your video content. Supports direct URLs, Content Document IDs, YouTube, and Vimeo URLs. Supports {{Record.FieldName}} syntax.	https://example.com/video.mp4<br>069XXXXXXXXXXXX<br>{{Record.Training_Video_URL__c}}
Auto Play	Checkbox	No	Automatically starts video playback when the page loads	Unchecked (recommended for accessibility)
Loop	Checkbox	No	Automatically restarts the video when it reaches the end	Checked for background videos
Hide Controls	Checkbox	No	Removes standard video player controls (play, pause, volume, progress bar)	Checked for kiosk displays
Width	Text	No	Video player width in pixels or CSS units	400px, 100%, 50vw
Height	Text	No	Video player height in pixels or CSS units	300px, auto, 50vh
Header Title	Text	No	Main heading displayed above the video. Supports {{Record.FieldName}} syntax.	Product Training Video<br>{{Record.Training_Module_Name__c}}
Header Caption	Text	No	Subtitle or additional context below the main title. Supports {{Record.FieldName}} syntax.	Sales Onboarding - Module 3<br>Duration: {{Record.Duration__c}} minutes
Header Icon Name	Text	No	Salesforce Lightning Design System (SLDS) icon name in format category:icon_name	standard:video<br>utility:video<br>custom:training
Display as Card	Checkbox	No	Wraps the video in a styled card container with padding and visual separation	Checked for dashboard placement

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

---

Examples

Example 1: Product Demo on Opportunity Page

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

Steps

1

Navigate to Lightning App Builder

edit your Opportunity record page

2

Drag the AX - Video component onto your page layout

3

Configure Video Source

• Set Video URL or Content Document Id to {{Record.Demo_Video_URL__c}} (assumes custom field storing video URLs)

• 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

Configure Display Sizing

• Set Width to 100% for responsive layout that adapts to container size

• Set Height to 400px for optimal viewing experience

5

Configure Header Information

• Set Header Title to Product Demonstration

• Set Header Caption to {{Record.Product2.Name}} (displays related product name dynamically)

• Set Header Icon Name to standard:video

6

Set Professional Display

Check Display as Card for professional presentation with styled container

7

Save and test with different opportunity records

Result: A card-wrapped video player showing product demonstrations specific to each opportunity's product, providing sales teams with contextual demo content directly on the opportunity record

---

Best Practices

Performance Considerations

• Use appropriate video resolutions for your use case (720p for most business content)

• Consider file sizes when using direct URLs - large files may impact page load times

• For frequently accessed videos, store them as Salesforce Content Documents for better performance

User Experience

• Avoid auto-play in most scenarios to respect user preferences and accessibility guidelines

• Provide meaningful header titles and captions to give users context

• Use the card display option to separate video content from other page elements visually

Accessibility

• Always include descriptive header titles

• Avoid hiding controls unless specifically required for your use case

• Consider providing alternative text descriptions in header captions for video content

Mobile Responsiveness

• Use percentage-based widths (100%) rather than fixed pixel values

• Test video display on various screen sizes

• Consider how header text will wrap on smaller screens

---

Troubleshooting

Video Not Loading

• Verify the URL is accessible and correctly formatted

• For Content Document IDs, ensure the file exists and users have access

• Check that external URLs (YouTube, Vimeo) are not blocked by your organization's firewall

Controls Not Responding

• If using "Hide Controls", controls are intentionally disabled

• For external video sources, some platforms may override control settings

• Browser-specific issues may affect video playback - test across different browsers

Performance Issues

• Large video files may cause slow loading - consider optimizing file sizes

• Multiple video components on one page can impact performance

• For high-traffic pages, consider using thumbnail images that launch videos in modals

---

Summary

The Video component provides a powerful way to embed multimedia content directly into Salesforce Lightning pages. With support for multiple video sources, dynamic content referencing, and extensive customization options, it enables rich user experiences for training, marketing, and communication needs. The component respects Salesforce security and sharing rules while offering flexible display options that work across desktop and mobile devices.