Styling

Media Chrome is written using Web Components. As such, you can do a lot of styling to the component through standard CSS properties, style attributes, and selectors. However, there are enough situations where you might want to style more specific details of some <media-chrome> elements (e.g. the size or color of the drag thumb on the <media-volume-range>) or easily update some styles more globally for <media-chrome> elements (e.g. changing the background color for all the control/display elements). To accomplish this, <media-chrome> relies primarily on CSS Variables to update specific styles for various elements.

Our current styling architecture is still quite nascent and is very likely to undergo changes, including quite large ones (all hopefully for the better!). Be sure to keep this in mind when upgrading versions of media-chrome.

  • <media-captions-button> (docs)
  • <media-fullscreen-button> (docs)
  • <media-mute-button> (docs)
  • <media-pip-button> (docs)
  • <media-play-button> (docs)
  • <media-playback-rate-button> (docs) (See notes below *)
  • <media-seek-backward-button> (docs)
  • <media-seek-forward-button> (docs)
NameCSS PropertyDefault ValueDescriptionNotes
--media-control-backgroundbackgroundrgba(20,20,30, 0.7)background color of the componentApplies to other components as well (See notes below **)
--media-control-hover-backgroundbackgroundrgba(50,50,70, 0.7)background color of the button when hoveredApplied by the :hover pseudo-class Applies to other components as well (See notes below **)
--media-control-heightheight24pxdefault height of buttons, ranges and text displaysApplies to other components as well (See notes below **)
--media-control-paddingpadding10pxdefault padding of buttons, ranges and text displaysApplies to other components as well (See notes below **)
--media-text-content-heightline-heightvar(--media-control-height, 24px)default line-height of buttons and text displaysApplies to other components as well (See notes below **)
--media-button-icon-widthwidthnonedefault width of button iconsOnly applies to <img> and <svg> tags
--media-button-icon-heightheightvar(--media-control-height, 24px)default height of button iconsOnly applies to <img> and <svg> tags
--media-icon-colorfill#eeedefault fill color of button iconsOnly applies to <img> and <svg> tags
--media-button-icon-transformtransformnoneapply a transform to button iconsOnly applies to <img> and <svg> tags
--media-button-icon-transitiontransformnoneapply a transition to button iconsOnly applies to <img> and <svg> tags
  • <media-time-range> (docs)
  • <media-volume-range> (docs)
NameCSS PropertyDefault ValueDescriptionNotes
--media-control-backgroundbackgroundrgba(20,20,30, 0.7)background color of the componentApplies to other components as well (See notes below **)
--media-control-hover-backgroundbackgroundrgba(50,50,70, 0.7)background color of the button when hoveredApplied by the :hover pseudo-class Applies to other components as well (See notes below **)
--media-control-heightheight24pxdefault height of buttons, ranges and text displaysApplies to other components as well (See notes below **)
--media-control-paddingpadding10pxdefault padding of buttons, ranges and text displaysApplies to other components as well (See notes below **)
--media-range-thumb-heightheight10pxheight of the underlying slider’s drag thumbApplied via ::-webkit-slider-thumb and similar pseudo-element selectors
--media-range-thumb-widthwidth10pxwidth of the underlying slider’s drag thumbApplied via ::-webkit-slider-thumb and similar pseudo-element selectors
--media-range-thumb-borderbordernoneborder of the underlying slider’s drag thumbApplied via ::-webkit-slider-thumb and similar pseudo-element selectors
--media-range-thumb-border-radiusborder-radius10pxborder radius of the underlying slider’s drag thumbApplied via ::-webkit-slider-thumb and similar pseudo-element selectors
--media-range-thumb-backgroundbackground#fffbackground color of the underlying slider’s drag thumbApplied via ::-webkit-slider-thumb and similar pseudo-element selectors
--media-range-thumb-box-shadowbox-shadow1px 1px 1px transparentbox shadow of the underlying slider’s drag thumbApplied via ::-webkit-slider-thumb and similar pseudo-element selectors
--media-range-thumb-transitiontransitionnoneapply a transition to the underlying slider’s drag thumbApplied via ::-webkit-slider-thumb and similar pseudo-element selectors
--media-range-thumb-transformtransformnoneapply a transform to the underlying slider’s drag thumbApplied via ::-webkit-slider-thumb and similar pseudo-element selectors
--media-range-thumb-opacityopacity1opacity of the underlying slider’s drag thumbApplied via ::-webkit-slider-thumb and similar pseudo-element selectors
--media-range-bar-color.<linear-color-stop>#fffcolor of the track’s progressed rangeThis is a <linear-color-stop> part of the linear-gradient() CSS function.
--media-range-track-color.<linear-color-stop>transparentcolor of the track’s negative spaceThis is a <linear-color-stop> part of the linear-gradient() CSS function.
--media-range-track-heightheight4pxheight of the underlying slider’s track displayApplied via ::-webkit-slider-runnable-track and similar pseudo-element selectors
--media-range-track-widthwidth100%width of the underlying slider’s track displayApplied via ::-webkit-slider-runnable-track and similar pseudo-element selectors
--media-range-track-borderbordernoneborder of the underlying slider’s track displayApplied via ::-webkit-slider-runnable-track and similar pseudo-element selectors
--media-range-track-border-radiusborder-radius0border radius of the underlying slider’s track displayApplied via ::-webkit-slider-runnable-track and similar pseudo-element selectors
--media-range-track-backgroundbackground#eeebackground color of the underlying slider’s track displayApplied via ::-webkit-slider-runnable-track and similar pseudo-element selectors
--media-range-track-box-shadowbox-shadownonebox shadow of the underlying slider’s track displayApplied via ::-webkit-slider-runnable-track and similar pseudo-element selectors
--media-range-track-transitiontransitionnoneapply a transition to the underlying slider’s track displayApplied via ::-webkit-slider-runnable-track and similar pseudo-element selectors
--media-range-track-translate-xtranslate0apply a translation to the underlying slider’s track displayApplied via ::-webkit-slider-runnable-track and similar pseudo-element selectors
--media-range-track-translate-ytranslate0apply a translation to the underlying slider’s track displayApplied via ::-webkit-slider-runnable-track and similar pseudo-element selectors
  • <media-time-range> (docs)
NameCSS PropertyDefault ValueDescriptionNotes
--media-time-buffered-color<linear-color-stop>#777background color of the buffered rangeThis is a <linear-color-stop> part of the linear-gradient() CSS function.
--media-preview-thumbnail-borderborder2px solid #fffborder of the thumbnail preview
--media-preview-thumbnail-border-radiusborder-radius2pxborder radius of the thumbnail preview
--media-preview-thumbnail-min-widthwidth120pxminimum thumbnail preview widthThe maximum CSS properties have priority over the minimum. Only px values are supported.
--media-preview-thumbnail-max-widthwidth200pxmaximum thumbnail preview widthThe maximum CSS properties have priority over the minimum. Only px values are supported.
--media-preview-thumbnail-min-heightheight80pxminimum thumbnail preview heightThe maximum CSS properties have priority over the minimum. Only px values are supported.
--media-preview-thumbnail-max-heightheight160pxmaximum thumbnail preview heightThe maximum CSS properties have priority over the minimum. Only px values are supported.
  • <media-time-display> (docs)
NameCSS PropertyDefault ValueDescriptionNotes
--media-control-backgroundbackgroundrgba(20,20,30, 0.7)background color of the componentApplies to other components as well (See notes below **)
--media-control-heightheight24pxdefault height of buttons, ranges and text displaysApplies to other components as well (See notes below **)
--media-control-paddingpadding10pxdefault padding of buttons, ranges and text displaysApplies to other components as well (See notes below **)
--media-text-content-heightheightvar(--media-control-height, 24px)height of the underlying text container for text-based elementsAlso applies to <media-captions-button> (See §Buttons)
  • <media-loading-indicator> (docs)
NameCSS PropertyDefault ValueDescriptionNotes
--media-loading-icon-widthwidth100pxwidth of the loading icon
--media-loading-icon-heightheightautoheight of the loading icon
--media-icon-colorfill#fffcolor of the loading iconOnly applies to <img> and <svg>

* Unlike most Media Chrome buttons, the <media-playback-rate-button> button displays text (and not an icon/svg), so many button styles don’t apply to it and some text display styles do apply to it (unlike most buttons).

** A few CSS Variables are more “global” in their application, so make sure you define and scope them via selectors appropriately.

  • <media-poster-image> (docs)
NameCSS PropertyDefault ValueDescriptionNotes
--media-object-fitobject-fitcontainhow the content of the image should be resized to fit the custom element
--media-object-positionobject-positioncenterspecifies the alignment of the image within the custom element’s box
--media-background-sizebackground-sizecontainhow the content of the background placeholder image should be resized to fit the custom element
--media-background-positionbackground-positioncenterspecifies the alignment of the background placeholder image within the custom element’s box