Floating player card

[antonio1475]

Hi. I wanted to have a floating player card for some time, but I never found anyone who did it. So I just did it and wanted to share, in cae someone elase googles it in the future.

Floating.Mini.Media.Player.mp4

type: custom:mini-media-player
entity: media_player.spotify_antonio
artwork: cover
source: icon
hide:
  power: true
  source: true
  name: false
max_volume: 30
visibility:
  - condition: state
    entity: media_player.spotify_antonio
    state_not: idle
card_mod:
  style: |
    ha-card {
      position: fixed !important;
      bottom: 10px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: 96.5% !important;
      max-width: 550px !important;
      margin: 0px !important;
    }
grid_options:
  columns: 12
  rows: 1

You can of course play with the size, width,... Mine is optimized for my iPhone 11 (it's not the exact same size as shown in the video), so do yours.

How to deal with overlap at the bottom (player on top of the other cards):
I recommend putting it as the last card in the last section. Play with the layout (rows) size to help in full visibility of your other last card in mobile, or you might need to add some empty/header card at the end to help here too, eg:

type: heading
heading: " "
heading_style: subtitle
icon: " "
badges: []
visibility:
  - condition: state
    entity: media_player.spotify_antonio
    state_not: idle
  - condition: screen
    media_query: "(min-width: 0px) and (max-width: 767px)"

Cheers