Customizing JW Showcase - jwplayer/jw-showcase GitHub Wiki

Important: These instructions are only relevant if you are building from the JW Showcase source code. They cannot be used with the precompiled app (i.e., the precompiled-static-app.zip download).

You can override the content and appearance of some of your site's elements by using your own HTML templates and CSS.

Components that Can Be Customized

header

The main header of Showcase which contains the banner logo, menu button and search components (if enabled).

toolbar

The toolbar contains the back button and video title.

toolbarVideo

A custom version of the toolbar but created separately so it can be customized. This toolbar contains the back, share and Save Video buttons.

footer

The footer of the site.

search

This component renders a search button and opens an input field when the user clicks on the search button.

videoDetails

Show the title, description and duration of a item.

Custom HTML

Any template can be edited in the app/views folder.

Custom Header SCSS

Create the file app/styles/components/_jwHeader.scss and add the following content:

.jw-header {
  
  // add your custom scss here
  
}