Persistent black background/frame on Audio Player widget in Canva

Ask the Community General Questions
1

Hi Elfsight Team,

I’m reaching out because I’m facing a major styling issue with the Audio Player widget when embedding it into a Canvaproject.

Despite setting the widget to ‘Embed’ mode and trying to set every possible background option to ‘Transparent’, there is a persistent, large black frame/box surrounding the player that I cannot remove or resize.

This is for a very delicate 15th Birthday (Quinceañera) invitation, and this ‘black block’ is completely ruining the floral aesthetic. I have already tried:

  • Switching between different layouts (Floating vs. Embed).

  • Adjusting the widget dimensions in the Elfsight dashboard.

  • Cropping the frame directly in Canva (it just scales the black box).

It seems like the iframe or the body of the widget has a hardcoded background color that won’t go away. Is there a specific Custom CSS snippet that can force the entire container to be 100% transparent? Or is this a known compatibility bug with Canva’s embed system?

I’ve attached a screenshot so you can see how it looks. Any help to save this design would be greatly appreciated!

Best regards,

https://www.canva.com/design/DAHBCNzvsl4/YYgJDZk9G7XyzbQEL-ciAw/edit?utm_content=DAHBCNzvsl4&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

1 Like
3

Hi there, @Pentaprisma_Creative and welcome aboard :waving_hand:

If I got it right, you’re using a dark theme in your browser. To fix this issue, we’ve added this code to the Custom CSS field on the Style tab of your widget’s settings:

.global-styles,
:root {
color-scheme: light !important;
}

Please check it out and let me know if everything is fine on your end :slightly_smiling_face: