Thank you! I’ll give it a try!
EDIT:
Is this corrected?
@ASNNetworks at the end i decided to modify my Theme.yaml in order to get the result easier.
One more question: I did a new test, copying your whole code and changing only the entity id.
I get the media player on the top instead of the bottom, like yours.
What is wrong with my code?
- type: picture-elements
image: local/images/overlay.svg
style: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
}
elements:
# Custom button card that shows media player artwork without paddings #
- aspect_ratio: 1/1
entity: media_player.appletv_soggiorno
icon: 'mdi:speaker-multiple'
label: not needed
name: not needed
show_icon: false
show_label: false
show_last_changed: false
show_entity_picture: true
show_name: false
show_state: false
tap_action:
action: none
style:
height: 100%
width: 100%
top: 50%
left: 50%
state:
- styles:
entity_picture:
- filter: grayscale(100%) blur(4px)
- transition: all 0.5s ease
value: paused
styles:
card:
- padding: 0px
- background-color: '#000000'
entity_picture:
- border-radius: 20px
- height: 100%
- width: 100%
- position: absolute
- transition: all 0.5s ease
type: 'custom:button-card'
# Custom card: button card for the background behind the media info, tied it to a input_boolean which is set in my automations to pair night/dark mode themes #
- type: "custom:button-card"
entity: input_boolean.mediaplayer_nightmode
show_icon: false
show_name: false
aspect_ratio: 4/1
state:
- styles:
card:
- background: '#000000'
- filter: 'opacity(70%)'
value: 'on'
styles:
card:
- background: '#FFFFFF'
- filter: 'opacity(70%)'
style:
'--ha-card-border-radius': '0px 0px 20px 20px'
height: 100%
width: 100%
top: 130%
left: 50%
# Custom card: mini media player card for media info and progress bar, hidden everything else #
- artwork: full-cover
entity: media_player.appletv_soggiorno
group: false
hide:
controls: true
icon: false
name: false
power: true
runtime: false
source: true
volume: true
hold_action:
action: none
tap_action:
action: none
icon: 'mdi:speaker-multiple'
info: short
source: true
style:
'--ha-card-background': '#000000'
'--mini-media-player-artwork-opacity': '0'
'--ha-card-border-radius': '20px'
'--mini-media-player-overlay-base-color': 'var(--text-color)' # make sure your theme is setup properly, or define this line in theme.yaml alltogether.
left: 50%
top: 50%
height: 100%
width: 100%
type: 'custom:mini-media-player'
# Custom card: button card eant to allow hold_action for more-info on anywhere on the card. Can be deleted if using more-info button #
- aspect_ratio: 1.2/1
entity: media_player.appletv_soggiorno
icon: 'mdi:speaker-multiple'
label: not needed
name: not needed
show_icon: false
show_label: false
show_last_changed: false
show_entity_picture: false
show_name: false
show_state: false
tap_action:
action: none
hold_action:
action: more-info
style:
height: 80%
width: 100%
top: 40%
left: 50%
styles:
card:
- filter: opacity(0%)
type: 'custom:button-card'
# Custom card: button card to call service media_next_track. Applied state styles based on entity state.
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-next-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.appletv_soggiorno
style:
right: -5%
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
value: 'paused'
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(30%)
- transition: all 0.5s ease
- color: '#FFFFFF'
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: media_player.appletv_soggiorno
haptic: medium
hold_action:
action: none
# Custom card: button card to call service media_previous_track. Applied state styles based on entity state.
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-previous-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.appletv_soggiorno
style:
right: 55%
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
value: 'paused'
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(30%)
- transition: all 0.5s ease
- color: '#FFFFFF'
tap_action:
action: call-service
service: media_player.media_previous_track
service_data:
entity_id: media_player.appletv_soggiorno
haptic: medium
hold_action:
action: none
# Custom card: button card to call service media_play_pause. Applied state styles based on entity state.
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:pause-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.appletv_soggiorno
style:
right: 10%
top: 50%
height: 40%
width: 40%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
value: 'paused'
icon: 'mdi:play-circle'
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(30%)
- transition: all 0.5s ease
- color: '#FFFFFF'
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: media_player.appletv_soggiorno
haptic: medium
hold_action:
action: none
# Custom card: button card to turn off media player
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:power-standby'
type: 'custom:button-card'
size: 90%
style:
right: 2%
top: 88%
height: 5%
width: 5%
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- color: 'var(--text-color)'
tap_action:
action: call-service
service: media_player.turn_off
service_data:
entity_id: media_player.appletv_soggiorno
haptic: medium
hold_action:
action: none
# Custom card: button card to invoke more-info. Written it with browser mod service call, to change easily for popup mod. Can be simplified to tap_action: more info instead.
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:dots-horizontal-circle'
type: 'custom:button-card'
size: 90%
style:
right: 18%
top: 88%
height: 5%
width: 5%
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- color: 'var(--text-color)'
tap_action:
action: call-service
service: browser_mod.more_info
service_data:
entity_id: media_player.appletv_soggiorno
deviceID: this
haptic: medium
hold_action:
action: none
It’s because of this. Mini media player originally shows artwork, which I have made transparent, allowing it to be aquare shaped/fullscreen. However, if there is no artwork, mini mediaplayer collapses. Since its position is fixed inside the picture-element, the location changes when the size of the mini media player changes as well. Resulting in it to go to the top.
Initially I tried to disable the artwork altogether from mini media player, so it’s just the collapsed version and set that at the bottom. But it gave mixed results on different devices. On desktop it was working fine, but iOS app had a small offset. So this is why I used this workaround for now. The downside is that the bar goes to the top when there is no artwork.
Try playing something on Netflix or use the card on a mediaplayer like Spotify of Chromecast. It should show artwork then and the menu will be places correctly.
I am still thinking of other solutions to solve this, but ideally I want new way to show the progress bar and running time. Because then mini media player card will not be needed anymore. Giving lighter code and no weird placings.
Btw: protip, you can replace the next/previous service calls with appletv remote service calls for left and right. Then you can also rewind/fastforward 
1 Like
Thank you very much for your explanation. I will think about it too and let you know if I have some idea.
Thank you also for the Apple TV remote tip!
So I went through the code of mini media player and I think I know what causes this. Inside the mini media player card, there is usage of position: relative and absolute. When changing everything to absolute, all element stay at the same location. But the mini media player breaks (all elements are out of place). It probably is fixable, but it won’t be worth the time. Also, having to change it each time mini media player card get’s an update is tedious.
I think I will look into a way to create an own progress slider and timestamp. That way I can be completely independent with this media player setup. If you have any ideas how to recreate those 2 elements, let me know 
!
So, I have figured it out and updated my code! I managed to get the positioning right on all screen sizes. I don’t know if you still use my card, but I figured I’d share this.
The new and improved code uses better/less code and alters mini media player directly. You DON’T need the input_boolean anymore for the media bar on the bottom. I have also changed the size of the scrolling info to not go behind the side buttons.Also added some lines so the play/pause buttons have a different color when playing vs paused (for better readbility with white backgrounds. You can change this yourself to whatever you like. Basically change all the color codes to whatever you want or use your theme veriables.
And most importantly: if there is no artwork, the media info will still remain at the bottom 
!
Let me know if you have other questions. If you no longer use this card, that’s fine too!
Updated code
type: picture-elements
image: local/tablet/overlay.svg
style: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
}
elements:
- aspect_ratio: 1/1
entity: media_player.multispeakers_cast
icon: 'mdi:speaker-multiple'
label: Google Cast
name: Badkamer
show_icon: false
show_label: false
show_last_changed: false
show_entity_picture: true
show_name: false
show_state: false
tap_action:
action: none
style:
height: 100%
width: 100%
top: 50%
left: 50%
state:
- styles:
entity_picture:
- filter: grayscale(100%) blur(4px)
- transition: all 0.5s ease
value: paused
styles:
card:
- padding: 0px
- background-color: var(--card-background-off) #the color when there is no artwork, change or remove to use own color
entity_picture:
- border-radius: 20px
- height: 100%
- width: 100%
- position: absolute
- transition: all 0.5s ease
type: 'custom:button-card'
- type: 'custom:mod-card'
style:
'--mini-media-player-icon-color': var(--text-color) #change or remove to use own color
'--mini-media-player-base-color': var(--text-color) #change or remove to use own color
'--mini-media-player-accent-color': var(--music-accent-color) #change or remove to use own color
border-top-left-radius: 0px !important
border-top-right-radius: 0px !important
width: 100%
transform: 'translate(0%, -100%'
card:
artwork: none
entity: media_player.multispeakers_cast
group: false
hide:
controls: true
icon: false
name: false
power: true
runtime: false
source: true
volume: true
hold_action:
action: none
tap_action:
action: none
icon: 'mdi:speaker-multiple'
info: scroll
source: true
# change the styling variable below to the color and width of scrolling info you want. Change height or remove line for default.
card_mod:
style: |
.mmp-player {
background: rgba(0, 0, 0, 0.75) !important;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
height: 95px;
}
.entity__info {
max-width: 60% !important;
}
type: 'custom:mini-media-player'
#This here below is if you want to have the option to tap_hold anywhere on the card for more-info popup. Remove this part if not needed.
- aspect_ratio: 1.2/1
entity: media_player.multispeakers_cast
icon: 'mdi:speaker-multiple'
label: Google Cast
name: Badkamer
show_icon: false
show_label: false
show_last_changed: false
show_entity_picture: false
show_name: false
show_state: false
tap_action:
action: none
hold_action:
action: more-info
style:
height: 80%
width: 100%
top: 40%
left: 50%
styles:
card:
- filter: opacity(0%)
type: 'custom:button-card'
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-next-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.multispeakers_cast
style:
right: '-5%'
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(30%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: media_player.multispeakers_cast
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-previous-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.multispeakers_cast
style:
right: 55%
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(30%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_previous_track
service_data:
entity_id: media_player.multispeakers_cast
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:pause-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.multispeakers_cast
style:
right: 10%
top: 50%
height: 40%
width: 40%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
icon: 'mdi:play-circle'
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(30%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: media_player.multispeakers_cast
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:heart-plus'
type: 'custom:button-card'
size: 90%
style:
right: 10%
top: 88%
height: 5%
width: 5%
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- color: var(--text-color)
tap_action:
action: call-service
service: script.add_to_playlist_multispeakers_cast
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:power-standby'
type: 'custom:button-card'
size: 90%
style:
right: 2%
top: 88%
height: 5%
width: 5%
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- color: var(--text-color)
tap_action:
action: call-service
service: media_player.turn_off
service_data:
entity_id: media_player.multispeakers_cast
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:dots-horizontal-circle'
type: 'custom:button-card'
size: 90%
style:
right: 18%
top: 88%
height: 5%
width: 5%
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- color: var(--text-color)
tap_action:
action: call-service
service: browser_mod.more_info
service_data:
entity_id: media_player.multispeakers_cast
deviceID: this
haptic: medium
hold_action:
action: none
4 Likes
This is really cool mate!
Thanks again for sharing your work, rly appreciated.
I’ll give it a try tomorrow!
1 Like
Nice job! I wanted to do a pop-ip with your project, but, because I use instead of icons entity pictures, it doesn`t show the artwork.
I tried to modify to show entity_picture_local, but with no chance!
What doesn’t work exactly? Do you mean you want to open a popup with one of the buttons inside the card, or do you want this whole card as a popup?
I have them both working. I also have this card as a popup and one of the buttons opens a more-info popup.
Can you paste your code, then I understand what you’re trying to create with this.
@ASSNetworks, my problem was that I use button card for a google mini and I dont use icon: , I use entity_picture. When I open a pop-up with your card, instead of the artcover it shows my customised entity_picture.
I attach a screenshot to see exactly.
But I for the media players I will not use anymore entity_picture.
Can you please show your pop-up for ispiration, maybe with the code also? Please 
I have posted my popup here a while ago: Chromecast Radio with station and player selection
Though that one is with my older media card version (it’s updated now with the card you see in this thread).
I used Bob_NL’s code as inspiration for the music selector and script, but applied it to Spotify. In that thread you will find a guide of Bob_NL and others you can use to create that. My popup is basically that + my media player card inside a vertical-stack.
Currently I cannot post my exact code, because I have split it up in different .yaml files and decluttering variables. This will cost a lot of time for me to put them together. But the code is essentially the same as what I linked + my media card inside a vertical-stack. If you’re stuck you can poste your code and I’ll try my best to help you 
1 Like
Hi
Great job Indeed !
But i tried your code (updated)and got an error at gui stage
Cut / paste after using my entity player, removed comments
" config.style.forEach is not a fonction "
Any Idea ?
Can you post your entire code inside a code format?
Hère is the code
type: picture-elements
image: local/tablet/overlay.svg
style: |
ha-card {
--ha-card-background: none
box-shadow: none
}
elements:
- aspect_ratio: 1/1
entity: media_player.x96mini
icon: 'mdi:speaker-multiple'
label: Google Cast
name: salon
show_icon: false
show_label: false
show_last_changed: false
show_entity_picture: true
show_name: false
show_state: false
tap_action:
action: none
style:
height: 100%
width: 100%
top: 50%
left: 50%
state:
- styles:
entity_picture:
- filter: grayscale(100%) blur(4px)
- transition: all 0.5s ease
value: paused
styles:
card:
- padding: 0px
- background-color: var(--card-background-off)
entity_picture:
- border-radius: 20px
- height: 100%
- width: 100%
- position: absolute
- transition: all 0.5s ease
type: 'custom:button-card'
- type: 'custom:mod-card'
style:
'--mini-media-player-icon-color': var(--text-color)
'--mini-media-player-base-color': var(--text-color)
'--mini-media-player-accent-color': var(--music-accent-color)
border-top-left-radius: 0px
border-top-right-radius: 0px
width: 100%
transform: 'translate(0%, -100%'
card:
artwork: none
entity: media_player.x96mini
group: false
hide:
controls: true
icon: false
name: false
power: true
runtime: false
source: true
volume: true
hold_action:
action: none
tap_action:
action: none
icon: 'mdi:speaker-multiple'
info: scroll
source: true
style: |
.mmp-player {
background: rgba(0, 0, 0, 0.75)
border-top-left-radius: 0px
border-top-right-radius: 0px
height: 95px;
}
.entity__info {
max-width: 60% !important;
}
type: 'custom:mini-media-player'
- aspect_ratio: 1.2/1
entity: media_player.x96mini
icon: 'mdi:speaker-multiple'
label: Google Cast
name: Badkamer
show_icon: false
show_label: false
show_last_changed: false
show_entity_picture: false
show_name: false
show_state: false
tap_action:
action: none
hold_action:
action: more-info
style:
height: 80%
width: 100%
top: 40%
left: 50%
styles:
card:
- filter: opacity(0%)
type: 'custom:button-card'
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-next-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.x96mini
style:
right: '-5%'
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF'
value: paused
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(30%)
- transition: all 0.5s ease
- color: var(--music-accent-color)
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: media_player.x96mini
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-previous-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.x96mini
style:
right: 55%
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF'
value: paused
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(30%)
- transition: all 0.5s ease
- color: var(--music-accent-color)
tap_action:
action: call-service
service: media_player.media_previous_track
service_data:
entity_id: media_player.x96mini
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:pause-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.x96mini
style:
right: 10%
top: 50%
height: 40%
width: 40%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF'
value: paused
icon: 'mdi:play-circle'
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(30%)
- transition: all 0.5s ease
- color: var(--music-accent-color)
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: media_player.x96mini
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:heart-plus'
type: 'custom:button-card'
size: 90%
style:
right: 10%
top: 88%
height: 5%
width: 5%
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- color: var(--text-color)
tap_action:
action: call-service
service: script.add_to_playlist_x96mini
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:power-standby'
type: 'custom:button-card'
size: 90%
style:
right: 2%
top: 88%
height: 5%
width: 5%
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- color: var(--text-color)
tap_action:
action: call-service
service: media_player.turn_off
service_data:
entity_id: media_player.x96mini
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:dots-horizontal-circle'
type: 'custom:button-card'
size: 90%
style:
right: 18%
top: 88%
height: 5%
width: 5%
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- color: var(--text-color)
tap_action:
action: call-service
service: browser_mod.more_info
service_data:
entity_id: media_player.x96mini
deviceID: this
haptic: medium
hold_action:
action: none
The code itself is fine, I copy/pasted your code in my test view in GUI and have no errors. Make sure you have everything setup before you try this code. This isn’t something you can just copy and paste and expect it to work. You need the custom cards that are used installed as well.
I see you use the exact same code for the image (with even the same location as me). Do you have the overlay.svg in that same folder? Do you have card-mod and mini-media-player card installed? Also the ‘add_to_playlist’ function is a script as you can see in the code. Do you have that script yourself? That script is inspired by this post: Save currently-playing song to Spotify playlist
Make sure you have everything setup properly before trying this card.
Thks for answering so Quick
I will continue with requirements as expected
1 Like
Keep me posted !
Hi again
I finally succeded to have rid off the error after deleting each style bloc
Example in this extract
tap_action:
action: none
hold_action:
action: more-info
style:
height: 80%
width: 100%
top: 40%
left: 50%
got the error
And :
tap_action:
action: none
hold_action:
action: more-info
# style:
# height: 80%
# width: 100%
# top: 40%
# left: 50%
the error gone
hope it is clear ?
So you can confirm you have custom-button-card, mini-media-player and card-mod installed and working? And you have the overlay.svg in that location stored that you have in your code?
Please first check you have all the components needed installed ánd working. Otherwise I’m just wasting time trying to figure out what the issue is if that’s not certain.
You are right
Sorry for disturbing you.
I realized that card-mod wad not active even if I follow the installation to do it
May be its my problem. I continue to investigate
Question : how to 'patch" card-mod to use mod-card instead ? It is not clear
to me.