This guide shows how to customize High Level's hosted video player skins.

High Level uses video.js as the hosted video player. Hosted videos are videos uploaded to a High Level subaccount vs embedded from YouTube, Vimeo, etc.

Demo & Tutorial Video

Instructions

Follow these instructions if using the skins provided in the Code section below. If using a different skin, you will need to modify the CSS to style the large play button shown before a video starts playing. High Level uses different HTML for the play button.

1. Copy the skin CSS into a Code element in the High Level page builder
2. Add video-js-custom class to the Video element > Advanced > Custom Class
3. Save and preview the page

If the skin is not rendering as expected, double check the Custom Class setting on the Video element. See Demo Examples below for a working example.

Demo Examples

• Nextflix style custom skin on a High Level funnel page

References

• Video.js Skins Documentation
• Skins Wiki - example skins for video.js

Code

The Netflix style skin code is provided for free. Login to access the code...