Music & audiosoundcloud.com
Can you embed SoundCloud in an iframe?
Yes, with the w.soundcloud.com player URL. SoundCloud documents this widget for embeds, not the normal track page.
Checked Test again
Live check
Two links, two results
Track pagePartial
soundcloud.com/forss/flickermood- X-Frame-Options
- SAMEORIGIN
- CSP frame-ancestors
- Not sent
- Response
- 200 OK · 414 ms · HTTPS
Widget URLEmbeddable
w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/293- X-Frame-Options
- Not sent
- CSP frame-ancestors
- Not sent
- Response
- 200 OK · 481 ms · HTTPS
Steps
How to embed SoundCloud
- Open the track or playlist on SoundCloud.
- Under the waveform, clickSharethenEmbed
- Select a player and set its options.
- Copy the embed code from Code & preview.
- Paste the code into the HTML editor of your site.
The owner must allow embeds.
If the Embed option is missing, turn on "Display embed code" in the track Permissions tab.
Embed code
Paste this into your page
HTML
<iframe
width="100%"
height="400"
scrolling="no"
frameborder="no"
allow="autoplay; encrypted-media"
src="https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{track-id}&show_artwork=true"
title="{track title}">
</iframe>The url parameter takes the API URL of a track or playlist. Add widget parameters after it with &.
URL patterns
Swap the link you have for the embed URL
- You havesoundcloud.com/{user}/{track}Use in the iframew.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/{track-id}
The widget needs the numeric track ID, not the track name. Copy it from the embed code.
Good to know
- Widget options include auto_play, color, show_artwork, show_user, show_playcount, sharing, buying and download.
- The SoundCloud Widget API can control a player on your page.
Sources
- SoundCloud Help · Embedding a track or playlisthelp.soundcloud.com/hc/en-us/articles/115003453587-Embedding-a-track-or-playlist
- SoundCloud Help · Track or playlist not embedding properlyhelp.soundcloud.com/hc/en-us/articles/115003449607-Track-or-playlist-not-embedding-properly
- SoundCloud Developers · Widget APIdevelopers.soundcloud.com/docs/api/html5-widget
- SoundCloud Developers · oEmbeddevelopers.soundcloud.com/docs/oembed
- MDN · X-Frame-Optionsdeveloper.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/X-Frame-Options
- iframecheck live check · both links
Profile updated