Newskit Logo

Getting started

Design overview

Popular searches

View GitHub


Video Player

The video player component allows a user to play and control video content.




View codeView Storybook

The NewsKit video player component wraps the underlying Brightcove player that can be themed, by using NewsKit design tokens.


In order to allow NewsKit consumers to display video content, the component is built on top of Brightcove’s video player.

The subcomponents listed below can be enabled in the Brightcove config file passed to the video player component:


Layout examples

Default player

The following example shows the default video player layout option that can be assembled using the various available subcomponents of the Brightcove player. View the example in Storybook.

Player in card

The video player can be used with other components to create more complex modules, such as a card to give context to the video being played. View the examples in Storybook.

Code examples can be viewed in Storybook via the ‘Story’ tab in the addons panel.

For full details of all available Brightcove player subcomponents, and their respective options and behaviours, refer to the Brightcove documentation, and the playerx GitHub repo.

NewsKit allows users to customise the styling of the subcomponents of the Brightcove player, using NewsKit design tokens

Refer to the Step-by-Step: Player Customization guide from Brightcove for details.

Accessibility considerations

The video player component meets the standards set out in the WCAG 2.1 AA accessibility guidelines.

Refer to the Brightcove Player accessibility features for more information.


Video Player

The video player requires a config prop that can be used to define an appropriate experience for different use cases. This will then be passed to the underlying Brightcove player .


Need Help?

Cant find what you are looking for?

Get In Touch

Need Help?

Cant find what you are looking for?