This iframe embed for a podcast shows up “normal” on all browsers and devices, but on Safari and iPhone, it shows up with a grey background and a totally different style as the others. We can love with the different style, but the grey background needs to be overridden. Unfortunately, css and html styling hasn’t worked at all.
Would be grateful for any tips as to what is causing this and how to workaround!!
In general you’ll have very little control over the internals of an IFRAME whose source originates from a different domain. That means any styling you’re seeing inside the IFRAME is coming from the content provider.
You’ll probably want to check with them to identify why Safari is different.
Nope. The browser’s job is generally to protect cross-domain content in IFRAME’s from meddling. However it may depend on the specific response headers the IFRAMEd document emits.
I don’t have Safari so I can’t see the problem, but always worth trying stuff.
I have tried literally EVERYTHING, even ChatGPTs advice. The wierd thing is that the player does load, so not completely blocked by Safari, but the design is completely off. And since it is an iFrame, can’t address it. :/
But you’re still saying that the design problem you’re seeing is inside of the IFRAME, right?
Have you contacted the company who is serving that content? It sounds like the Safari issue is related to their content, not your design.
What you’re seeing is the native .mp3 player for each browser. If you want to have more control over the look, you’d want to use the platform’s embed player:
If you just want to use the mp3, you can use a player like Soundcloud which has a minimalist option.
