Using element css to customize embedded audio player style

[jptsetme]

I’m trying to change the button color on the embedded audio player using element css, but I’m fairly certain I don’t have the right element id. I tried these two lines in the element css for the audio element, but have not seen any change to the css shown in Chrome Developer Tools.

$el .podcast-player__controls .podcast-player__controls--buttons	{podcastKeyPrimary: #B39134;}
$el .podcast-player__controls .podcast-player__controls--buttons	{button-color: #B39134;}

Would love to know how to connect back from what I see in dev tools to chat element ID I should use to applu element css. Thanks for helping teach me to fish!

[marc_a]

Hey @jptsetme,

Thanks for reaching out!

The embedded audio player is an iframe, you cannot change the style of a page displayed in an iframe unless you have direct access and therefore ownership of the source html and/or css files.

This is to stop XSS (Cross Site Scripting).

Hope that helps.

[jptsetme]

Thanks for the quick reply. I see that the iframe sandbox has “allow-same-origin” set; am I wrong in thinking that should treat the content in the iframe as from my same origin?

[tristup]

Hi @jptsetme,

The allow-same-origin allows the document to maintain its origin. So if it is mentioned in your iframe that seems the document should be shown from the same origin only.

Thanks