Player.style Themes

Today, most web developers just use the default UI of their video player. That's sad 😢. But it's hard to customize player UIs, and any suite of _skins_ are often out of date or missing important use cases.

Media Chrome makes it easy to build player UIs using just HTML or React components instead of learning a player's UI framework.

This effort has been started on Player.style, but the goal is to have many many themes to serve the community better and unlock more creativity.

Players can be beautriful

During the 2025 Summer Camp, right before Christmas, we created this beautiful theme to celebrate Santa's arrival with the entire video community.

Visit player.style to explore all the themes lovingly crafted by the designers in our community!

player.style

How to use x-mas theme with any player!

Select your player and your favorite framework, and get the code to embed the X-mas theme.

Choose your player and framework here

A Beautiful IETF MoQ Player

During the MonteVIDEO Summer Camp 2025, we worked on improving the moq-js player by creating a web component that allows you to use player.style.

moq-js project

Make you player work with player.style

To do this you will have to crate a web component that behaves like the html video tag.

A web component is a reusable, encapsulated custom element built using standard web technologies. It allows developers to create new HTML elements that behave like native elements, with their own functionality, styles, and lifecycle. Web components are composed of three main technologies:

Custom Elements – Define new HTML elements with custom behavior using JavaScript.
Shadow DOM – Encapsulates styles and logic, preventing conflicts with the rest of the page.
HTML Templates – Enables reusable content structures that can be instantiated dynamically.

Web components work across different frameworks and browsers, making them a powerful tool for building modular, maintainable web applications.

To create a web component equivalent to the <video> tag, it must replicate its core functionality, attributes, and events while maintaining a seamless user experience. The component should internally use a native <video> element and expose its essential methods, properties, and events.

The key methods that must be supported include play(), pause(), load(), and canPlayType(type), ensuring users can control playback as they would with a standard <video> element. Additionally, requestPictureInPicture() should be implemented for picture-in-picture support.

For properties, the component must support src, currentTime, duration, paused, muted, volume, playbackRate, controls, loop, autoplay and poster. These properties allow interaction with the video state, playback behavior, and appearance. The component should also handle preload and crossOrigin for network-related configurations.

The component must mirror the native <video> element's behavior by dispatching key events such as play, pause, playing, waiting, seeking, seeked, timeupdate, ended, and ratechange. Additionally, it should fire loadedmetadata, loadeddatacanplay, and canplaythrough to signal loading progress, as well as volumechange when the volume is adjusted.

By implementing these essential features, the web component will behave just like the native <video> tag, providing full compatibility while encapsulating functionality within a custom element.

Checkout the media-elements project to get examples of how to implement a web component of your player

Page updated

Report abuse