How to Configure the Self Hosted Video Player (HTML5)

Stage 1

Drag the HTML5 Video Player widget onto the canvas.

Stage 2

In the 'Video Name / ID' field insert your own unique video ID. This can be what ever you want to name it and is only important if you have multiple video widgets on the same page.

Stage 3

If you want to load a preview image that is hosted locally, uncheck the box that says 'Enable External Preview Image Location.' In this tutorial we will be using a locally hosted video. Once this box has been deselected, the 'Add File' option will appear.

Stage 4

Load in your preview image by looking through your file browser. We recommend to use a JPEG file or a PNG file for optimum results.

Stage 5

To load the video, follow Stage 4, but this time you must select your .mp4 and .webm and upload them in the widget if you are hosting locally. It is important that you upload a .webm in the appropriate section in order to allow for optimum playback on all devices. You can convert files to .webm format using this link.

Completed!

Your video will now be loaded into the HTML5 video player ready for use on your site! You can continue to style the video player skin as you wish using the other options located in the widget Options panel.