> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-video.md). # 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 url="" flowId="gWdBBOtaozayQscpRbF8" %} ### 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: 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: ![](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 url="" flowId="7yKRNHeOoVwXmtWOL659" %} **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 url="" flowId="d0L0qs5LgciX8SQBNWyY" %} **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 %} *** ## 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-video.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.