Get more content like this

Integrating JW Player with Rich Text Editor

Jwplayer Integration

This post will show how videos can be added to a Rich Text field using the Rich Text Editor. Videos can be added from Media Library or a CDN. The width and height of the video can be set while adding the video. Videos are displayed on the website with JWplayer.

The solution is to create a custom button on the Rich Text Editor which, on click, will show a popup to enter video details and add video to content. The following high level steps illustrate how the solution can be implemented.

Step 1: Create an Editor Button item in the Core database

Create a copy of Rich Text Default toolbar and insert a Html Editor Button. The data source property of the Rich Text field should be set to the newly created profile.

Step 2: Shell Implementation

Add the corresponding XML file (InsertVideo.xml) to the folder \sitecore\shell\Controls\Rich Text Editor. This file will set the video width and height and call the JavaScript code to popup the dialog to enter video details.

Step 3: Create a config file that includes the Rich Text commands JavaScript file

This config file is placed in the App_Config\Include folder.

Step 4: Create a JavaScript file to add JWplayer code

Add the references of jQuery and JWplayer to the layout.

Step 5: Add video to content using Rich Text Editor

On clicking the video icon in the Rich Text Editor, it will show a popup where the user can enter details of the video.

After the data is entered, click the Link button. This will add a Video tag to the content in the Rich Text field.

Step 6: Save and publish the item to render the video on the page

For further assistance to Integrating JW Player with Rich Text Editor on Sitecore Contact Us Today.

Need help powering your website with Sitecore?

Get In Touch