# 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. {% @arcade/embed flowId="gWdBBOtaozayQscpRbF8" url="" %} ### 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`\
`069XXXXXXXXXXXX`\
`{{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`\
`{{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`\
`Duration: {{Record.Duration__c}} minutes` | | **Header Icon Name** | Text | No | Salesforce Lightning Design System (SLDS) icon name in format `category:icon_name` | `standard:video`\
`utility:video`\
`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: ![](https://docs.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252F7qtRtIwIgo6RD3KxzcuI%252F2024-07-04_14-43-46.png%3Falt%3Dmedia%26token%3D31c22a2f-9d90-400c-b34b-e163ff599826\&width=768\&dpr=4\&quality=100\&sign=b908a8cf\&sv=2) 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 {% @arcade/embed flowId="7yKRNHeOoVwXmtWOL659" url="" %} **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** {% stepper %} {% step %} #### **Navigate to Lightning App Builder** Edit your Product2 record page {% endstep %} {% step %} #### **Drag the AX - Video component onto the layout** {% endstep %} {% step %} #### **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) {% endstep %} {% step %} #### **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 {% endstep %} {% step %} #### **Save & review** {% endstep %} {% endstepper %} **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 {% @arcade/embed flowId="d0L0qs5LgciX8SQBNWyY" url="" %} **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** {% stepper %} {% step %} #### **Navigate to Lightning App Builder** Edit your Knowledge record page {% endstep %} {% step %} #### **Drag the AX - Video component onto the layout** {% endstep %} {% step %} #### **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) {% endstep %} {% step %} #### **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 {% endstep %} {% step %} #### **Save & review** {% endstep %} {% endstepper %} *** ## 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.