Styling
Media Chrome provides a lot of ways to easily customize the look and feel of your media player UI. In this guide, we’ll go over some of the core features available including:
- Updating default styles with CSS variables
- Using component slots to customize icons
- Taking advantage of container components’ built in styles
- Using breakpoints for mobile-first, responsive design
- Using CSS
:part()for complex component styling
Just to have a baseline, let’s start with a simple player UI built with Media Chrome that uses <media-play-button>.
Styling with CSS variables
Section titled Styling with CSS variablesWhile the component looks pretty good out of the box, maybe you want a slightly different color palette. To help make these styling cases easier, Media Chrome provides a set of well defined CSS Custom Properties (also known as “CSS Variables”). Here’s an example where we’ve changed the default color of the <media-play-button>’s icon, background, and hover background.
You may have noticed that the names of these variables make no specific mention of play buttons or even buttons at all. That’s intentional. Many of our CSS variables are shared across many of our components, and we’ve intentionally named them to account for the scope of where they apply. If you only want them to apply to a particular component, you can use standard CSS selectors to scope them, like the the example above.
Each Media Chrome component has a pretty wide set of useful variables, including the color-related styles you see, font related styles, padding and sizing styles, and several others, which you can find in the reference section of each component’s documentation. For example, you can find a full list of <media-play-button> CSS Variables here. For a complete list of Media Chrome CSS variables, check out our styling reference.
Using custom icons
Section titled Using custom iconsBeing able to easily customize a variety of CSS properties is great, but that’s not where custom styling stops with Media Chrome. For example, for any of our components with icons, you can override the defaults by passing in your version as a child element with the expected slot attribute, which identifies which state the icon is for. Here’s an example of adding custom play and pause SVG icons to our previous example. Notice that these SVGs still inherit our custom icon color.
Earlier, I mentioned that you can use whatever you want for your “icons”. This includes other images, a <span> with some text, or whatever makes sense for your use case. Here’s an example of using Font Awesome Web Font icons. If you take a look at the custom-styles.css file, you’ll notice that I’m using slightly different CSS variables here (since the “icons” are actually font glyphs) and I also needed to apply some additional styles to the <i> element to make sure the sizes and layouts are consistent when toggling between “play” and “pause”.
Advanced - Recommendations for custom icons
Section titled Advanced - Recommendations for custom iconsThere are a few things that we typically recommend when using custom icon images to make them work as smoothly as possible with Media Chrome.
- While you can slot anything, we recommend SVGs, since they tend to be an efficient and scalable (hence the name) image format that is also easier to do things like tweak the dimensions of.
- Avoid hardcoding
height,width, orfillcolor in the SVGs. While not required, this is the best way to ensure that the sizing and coloring styles will be inherited by Media Chrome components and CSS variables. - When possible, define the SVG as
viewBox="0 0 24 24". You can always use CSS to tweak these details, but this will help ensure that you won’t have things like unintended whitespace or have to muck around with the padding of things like your button components.
Styling Multiple Components
Section titled Styling Multiple ComponentsIn the previous example, I ended up using different CSS variables for my font-based icons vs. the SVG-based ones. This also applies for other color styles used in Media Chrome components. Since folks will typically want a consistent palette for their media player, Media Chrome has a couple of “color palette” CSS variables that work as defaults for some of the CSS variables used above: --media-primary-color, which you can think of as a “foreground” color, and --media-secondary-color, which you can think of as a “background” color. This makes styling multiple Media Chrome components easier with just a few CSS variables.
To demonstrate this, here’s an example with several more components, including a range component (<media-time-range>), a text-based button component (<media-playback-rate-button>), and a text-based display component (<media-time-display>). All of these are styled using just 3 CSS variables. If you look at the custom-styles.css, you’ll also see some of the related CSS variables commented out so you can experiment with their relationships.
Conditional styling with media attributes
Section titled Conditional styling with media attributesIn the previous example, we added several components, including a captions button and an airplay button. But what if your video doesn’t have any closed captions or subtitles? What if you’re in a browser that doesn’t support AirPlay? As you may already know, Media Chrome works by passing around different media state to its components, including the Media Controller component itself. Because this state will show up as attributes on the relevant components, we can use standard CSS attribute selectors to change styles based on those attributes.
Below is an example of how you can hide specific components using media state attributes. Check the component’s docs to see a list of all media state attributes it will receive.
Built in container styling
Section titled Built in container stylingWe’ve already seen a number of ways to customize the look and feel of things in Media Chrome. But one easy way to get a lot of reasonable styles “out of the box” is by using Media Chrome’s container components. This next example uses <media-control-bar> with <media-controller> to show some of these super powers.
When it comes to our container components, you’ve actually been working with one of them from the beginning, albeit a special one: <media-controller>. Just like our button icon slots, the Media Controller container component has some well defined slots that will position components in different “regions” above the video. In this example, we’re using the slot="top-chrome" and slot="centered-chrome" to add a title and “big play button”, respectively. Note that our slot="top-chrome" component is positioned at the top left (similar to the other components we’ve been using, which were positioned at the bottom left), whereas our slot="centered-chrome" component is (shockingly) centered over the video. If you take a look at the custom-styles.css, you can also see how we’re using some attribute selectors and CSS variables to apply some general styles and then tweak or override them for the components in each slotted region.
In the example, we’ve also replaced the <div> we were using to lay out our Media Chrome components with a second container component, <media-control-bar>. This gives us a few things automatically:
- If you either resize the “page” or remove some of the components, you’ll see that the
<media-time-range>will automatically grow to take up as much real estate is available to make seeking easier. - You can see how the components will automatically scale down based on the available real estate.
- By using
<media-control-bar>with the<media-controller>, it will automatically grow to fill the entire width of controller, as most folks would expect for a standard player UI.
Responsive CSS design with Media Controller breakpoints
Section titled Responsive CSS design with Media Controller breakpointsIn order to make responsive design easy, we’ve built in a concept of “breakpoints” for <media-controller>, which allows you to build UIs based on the player’s size (and not just the page size). In the example below, you can see a basic implementation of a “mobile first” responsive design, where we apply the most generic styles for the smallest, “mobile” UI and then override them as the player UI gets larger. Like earlier examples, we can take advantage of attribute selectors, this time using breakpointmd for our standard “desktop” UI cutoff. I’ve also included a simple “extra large” (breakpointxl) example that makes all of the controls larger (NOTE: For this XL example, you’ll probably need to open the example in Code Sandbox).
Like many features in Media Chrome, while we have some reasonable default values, you may define your own breakpoint cutoffs for more advanced customization. For a more in depth look at responsive design, check out our guide.
More complex component CSS
Section titled More complex component CSSMost of our components are simple enough to style in the fairly simple ways we’ve covered thus far. However, a few of our components are made up of some more complex parts. For these, you can directly style these “sub-components” or “sub-sections” by using CSS ::part() pseudo-element selectors, which are similar to pseudo-element selectors. Below is an example where we’ve customized some styles on the <media-time-range>’s thumbnail and time preview box part (visible when hovering over the component). We’ve also added a transluscent overlay using one of the <media-controller> parts that fades in/fades out just like the control components. You can find the list of <media-time-range> parts here.