Lightning Record Video Viewer Component

Want to embed a video on your Lightning record’s detail page? Yea? Read on to learn how.


A fellow Salesforce community member asked for some help on how to embed a video on a Lightning record home page using a field from the record as the video’s source url. The “RecordVideoViewer” Lightning component lets an admin place the component on the desired record’s home page, specify the field as the video’s source url, and specify the video’s height and width and then the video is available.


  • Available on any record page.
  • Can have more than one on the same record page.


  • Basic. It isn’t styled or have a header.

Future Enhancements

  • Refactor a “Video Viewer” lightning component out that has a source url attribute so that it can be used anywhere and then this component becomes a container for that one.


Besides technology, I also am passionate about personal finance. I really like the “The Position of F**k You by JlCollinsNH” video. Here’s how it looks on a sample account page using this component.



Use the Lightning Prototypes Unmanaged Package.


After the Lightning Prototypes Unmanaged Package is installed, use the following steps to add the “RecordVideoViewer” custom component to your lightning record page.

  1. Open the desired record page in Lightning.
  2. Drag the “RecordVideoViewer” custom component to the desired location.
  3. Click the component to open its properties.
  4. Enter the following properties and then save.
    • Video Field: Enter the API Name of the field on this record that has the video’s source url. This could be a URL field or even a formula field.
    • Video Height: Enter the desired height. This is any valid CSS value such as 500px or 10%.
    • Video Width: Enter the desired width. This is any valid CSS value such as 100% or 200px. Recommend using 100% to start.

Disclaimer: If the video isn’t hosted on Salesforce, you’ll probably have to whitelist the source domain in the “Content Security Policy” section in the Salesforce admin so that your browser will allow the video to be shown.

Component Code

Designer File


Component Controller

The component controller uses the recordId and videoField attributes to call the getVideoUrl function on the Apex controller and then sets the videoSrcUrl attribute with the returned value.

Apex Controller

The getVideoURL function takes in a recordId and videoField as input and dynamically queries the specified videoField from that record and returns its value as the video’s source URL.

Apex Test Controller

2 thoughts on “Lightning Record Video Viewer Component”

  1. When I embed the video using iframe with url being used for src attribute, full screen functionality is not working. Though I have added allow = “fullscreen” and allowfullscreen=”allowfullscreen”.

    This is not working for videos other than YouTube

    1. Avinash,

      Other video providers often have embeddable urls that differ from the video url when viewing the video on their platform. See if the video has an “embed” url and if so, use that instead.

Comments are closed.