Lightning Record Video Viewer Component

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

Overview

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.

Benefits

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

Limitations

• 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.

Example

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.

DISCLAIMER: NOT WORK FRIENDLY TO WATCH!

Installation

Use the Lightning Prototypes Unmanaged Package.

Configuration

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

Markup

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