Media player

When enabled, this configuration displays a media player widget above or alongside the navbar. You can configure one or multiple players. With multiple players, a carousel appears with dot indicators and swipe/drag to switch between them. The widget is shown when any configured player is playing or paused (or when a custom show template evaluates to true).

Options¶

Option	Type	Default	Description
`players`	array of players	-	List of media player configurations. Each player has its own `entity` and optional overrides.
`show`	boolean \| JSTemplate	-	Widget-level visibility. When set, overrides each player's visibility for the whole widget.
`album_cover_background`	boolean	`false`	Display the album cover as blurred background for all players
`desktop_position`	string	`bottom-center`	Position of the media player widget on desktop: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center` or `bottom-right`. On mobile, the widget is always displayed at the bottom of the view.

Player options¶

Each item in players supports:

Option	Type	Default	Description
`entity`	string \| JSTemplate	Required	Entity ID of the media_player
`show`	boolean \| JSTemplate	`true` when `playing` or `paused`	Per-player visibility. When configured, this player is shown when the template evaluates to true.
`icon`	string \| JSTemplate	-	Icon to display instead of the album cover. Without an icon or a cover, `mdi:music` is shown.
`title`	string \| JSTemplate	`media_title` attribute	Title text displayed in the media player.
`subtitle`	string \| JSTemplate	`media_artist` attribute	Subtitle text displayed in the media player.
`tap_action`	HA Action	`more-info` for entity	Tap action for this player.
`hold_action`	HA Action	-	Hold action for this player.
`double_tap_action`	HA Action	-	Double tap action for this player.

Examples¶

Multiple players (carousel)¶

media_player:
  album_cover_background: true
  players:
    - entity: media_player.spotify
    - entity: media_player.sonos
      icon: mdi:speaker
    - entity: media_player.kitchen

Desktop position¶

type: custom:navbar-card
desktop:
  position: left
media_player:
  desktop_position: top-right
  players:
    - entity: media_player.living_room

Media player at the top right, with the navbar on the left

Dynamic entity with template¶

media_player:
  album_cover_background: true
  players:
    - entity: |
        [[[
          const state = states['sensor.area_select'].state;
          switch (state) {
            case 'Office': return 'media_player.office';
            case 'Kitchen': return 'media_player.kitchen';
            case 'Main bedroom': return 'media_player.main_bedroom';
            case 'Living room': return 'media_player.living_room';
            default: return 'media_player.whole_home';
          }
        ]]]
      tap_action:
        action: navigate
        navigation_path: /lovelace/media
      hold_action:
        action: more-info

media_player:
  players:
    - entity: media_player.test_media_player
  show: "[[[ return !navbar.isDesktop ]]]"  # Only on mobile
  desktop_position: bottom-right

Per-player show (filter which players appear)¶

media_player:
  players:
    - entity: media_player.spotify
      show: "[[[ return states['media_player.spotify'].state == 'playing' ]]]"
    - entity: media_player.sonos
      show: "[[[ return states['media_player.sonos'].state == 'playing' ]]]"