@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 
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
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.
Mod-card isn’t a patch. You can use that by simply using the code. Card mod needs to be fully installed and working ofcourse. Then you can just use the ‘mod-card’ part of my code, no patch needed.
Read for more info: https://github.com/thomasloven/lovelace-card-mod#mod-card
Hi again me
I finally know hos to solve the problem and I would like to share it with you in case of other diag from you.
I opened an issue at card-mod and at hacs without succes
AND I finally found what was wrong from my side :
Each style block have been change to fix it on my installation :
style:
height: 80%
width: 100%
top: 40%
left: 50%
instead of 2 spaces in front of each attribute for style
Now I have no error but i dont have the miniplayer occupying the whole overlaping
What should be change to have the size of mini player alligne with overlay ?
I tried to change height without success
The card is already setup properly to have the mini player alligne with the overlay, that’s the whole point of the syling I experimented with myself. Honestly I have no clue what you’re doing and why it doesn’t work for you. Other users have copied the code, pasted it and edited the entities and variables. And have it working. Theres nothing I can do to check, because the code works for me everytime. Even the code you gave me which gave you issues, works fine on my system.
Edit: Judging by your code you are not using card mod correctly. You say:
instead of 2 spaces in front of each attribute for style
You left out the indentations (the 2 spaces), which simply removes the whole style. That’s why your card is not alligned, because you have NO style setup. Your issue is card mod and how to use it. I honestly think you’re not totally sure how card-mod works, which gives you issues.
So you didn’t ‘fix’ anything and you didn’t find out what was wrong on your side. You simply changed the code of style, which made the code become empty. Removing the spaces literally takes out the style. It HAS to have the spaces in order for card mod to even function.
Edit 2: reading your Github ticket now and I think you are confused about card-mod and mod-card. Which are part of the same component, but used very differently. If you have card-mod installed and you have succesfully styled something (like on Github screenshot), then my code should work for you now. Just copy it, edit the parts and save it. USE the indentations, do NOT remove the spaces under style.
Hi
you were completlye right
I put the browser in dev mode and I realize my problem was link to dedondancy in my ressources I presume
Now every thing is working welll
Sorry for disturbing you
Thanks a lot for your efforts
Best regards
Aladin
Glad it’s all sorted !
Really awesome project I have already implemented in my lovelace with your last setup, so far so good, now i’m in a bit of trouble as i am trying to implement the volume slider with the Media player popup card under my player, as you showed in the first setup, i have code but when I put it on lovelace it disappears, i need another overlay for placing that too ?
The code is :
- type: 'custom:media_player-popup-card'
entity: media_player.spotify
fullscreen: false
icon: 'no'
sliderWidth: 60px
sliderHeight: 125px
sliderThumbColor: '#00b7ff'
sliderTrackColor: '#a1a1a1'
Any help is appreciated,
Thank You
Hi, what do you mean by this?
I don’t have a volume slider here. Or do you mean a different project?
Yeah, that’s an entirely different concept/project. So what I understand is that you’re basically having issues with displaying the media player popup_card. This is not related to the media player code of mine on this thread though.
You should ask in the thread of that card if you’re having issues displaying the card. I have this code myself in different places in my UI and works fine (this is light popup as example, but identical for media player popup):
- borderRadius: 30px
brightnessHeight: 280px
brightnessWidth: 150px
icon: 'mdi:speaker-group'
entity: light.afzuigkap
fullscreen: false
sliderThumbColor: var(--light-accent-color)
sliderHeight: 280px
switchWidth: 150px
type: 'custom:light-popup-card'
Perhaps icon: no is the issue. I use a non-existing icon code so it doesn’t show. (mdi:speaker-group doesn’t exist). Try changing that, maybe icon: no is not a correct syntax.
In any case: the volume slider is not part of this media player code I wrote. So it should be a separate card and has nothing to do with this player.