Embed BrightCove Video URL in Sitecore Content Hub

In continuation of utilizing to Sitecore Content Hub feature, one of our requirements was to embed the Brightcove video in Content.

To integrate video in Sitecore Content Hub, the Content Hub Rich Text editor named the CKEditor provides functionality to upload the video to Content Hub and insert the video using the following button.

Content Hub utilizes CK editor to edit the HTML content. After further analysis, I found that CKEditor tool only supports certain media providers, such as YouTube, Vimeo, Twitter, and Spotify. It will not work with custom video links. More information is available here: Media providers

Unfortunately, we do not have any OOTB option to embed the Bright Cove video URL in Content. To work around that I decided that I would embed the video URL using <iframe> tag into the content or other HTML runtime on the save button click.

Step 1: Create a new field in the Content Hub to allow the author to enter the video URL.

Step 2: Define any placeholder key to identify the location where to insert the <iframe>. I am defining it as “{video-1}”

Step 3: Incorporate the placeholder keys into the content body field at the relevant locations. For instance, you can place them where you want the videos to appear within the content. 

Step 4: Write a script to get the entity object, find the placeholder key, and replace it with the video URL defined in another field:

You can update the above same piece code as per your requirement.

Step 5: Write an action in Content Hub for the above Script.

Step 6: Write a Trigger to execute the aforementioned action and script on the save button click. If you are not familiar with the Sitecore Content Hub Script, Action, and Trigger, how to write and execute it, see the blog post: Create Script, Action, and Trigger in Sitecore Content Hub

Step 7: Once you complete the above steps mention the video URL and placeholder key in the respective fields and click on the save button.

The following message to appear, and the content will auto-refresh:

Step 8: Your BC video has been embedded in the respective location, go to the Content Body field to verify the changes:

Using the same approach you can embed any other source of video URL to the content body as well.

Note: I have observed that one issue arose because CKEditor, which is the rich text field editor Sitecore uses, employs content filtering or sanitization. Therefore, when the author clicks in the Content Body fields <iframe> video disappears.  This is a security measure designed to prevent issues such as XSS attacks. Due to Brightcove not being on the list of supported sources, CKEditor automatically removes the iframe tags when a user attempts to edit the existing content.

As an alternative, consider, placeholders for videos are only added after the content is published or when it's in its final stage. This reduces the chance of further edits that could remove the iframe tags again.

Sitecore created a new feature request with reference FRM-2089 to add Brightcove Video OOTB using CKEditor, so this suggestion could be implemented in a future version of Content Hub.

Happy Sitecoreing 😊