Embedding Spotify player

Spotify allows users to generate HTML for embedding players in web pages (select Share > Embed track, etc.). While this works fine in e.g. a bare-bones HTML page, the rendering of the players is not correct in TiddlyWiki. It turns out that the problem can be solved by adding border:none to the style attribute of the iframe, as illustrated in the screenshot.

The player at the top uses the code generated by Spotify:

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/4ftJEhQYwzs7T61qNdyQw9?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

while the player at the bottom adds border:none to the generated style attribute:

<iframe style="border:none;border-radius:12px" src="https://open.spotify.com/embed/track/4ftJEhQYwzs7T61qNdyQw9?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
6 Likes

Yeah!.. but is there a trick to let it play more than 30 secs for free?

A premium account is required and you must be logged in (at https://open.spotify.com).