Embedding an Apple Music preview in HTML without track info

Question

Apple Music has great instructions and code to embed a song preview here.

<iframe allow="autoplay *; encrypted-media *;" frameborder="0" height="150" style="width:100%;max-width:660px;overflow:hidden;background:transparent;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.music.apple.com/us/album/pancho-and-lefty/1182567204?i=1182567495"></iframe>

However, the iframe looks like this:

How can I create embedded code that not show the track artist, title and artwork? It looks like Rolling Stones has this website.

Basically, I'd just like the Play button.

Answer 1

One method to hide certain parts of an iframe (if it doesn’t violate any usage policies) is to use a container with overflow: hidden CSS property and to give the iframe a larger size or a negative margin, so part of its content is not visible. This method is somewhat limited and may not work perfectly in all situations or for all content. Here is an example with Spotify's embed code:

<div style="width:100%; height:80px; overflow:hidden; position:relative; border-radius:12px;">
    <iframe style="position:absolute; top:-105px; left:-135px; right:-5px; bottom:-5px; border:none;" src="https://open.spotify.com/embed/track/4Pl8ViAolRF4rK8QBMhKd9?utm_source=generator&theme=0" width="100%" height="152" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</div>