2 minutes reading time (211 words)
A simple, responsive SoundCloud <iframe> embed for Joomla 6. No external JS/CSS; everything is self‑contained and responsive (100% width).
- Embed a track or playlist
- Toggle common UI: Visual mode, Comments, User info, Reposts, Teaser, Hide related
- Optional Follow button and light framing (Border/Radius)
Parameters
| Parameter | Default | Description | Widget param |
|---|---|---|---|
| SoundCloud URL | demo track | Track/playlist URL from soundcloud.com | url |
| Visual mode | On | Large artwork style | visual=true/false |
| Autoplay | Off | Attempt autoplay (may be blocked) | auto_play=true/false |
| Loop | Off | Repeat playback | loop=true/false |
| Accent color | #ff5500 | Hex color for widget accents | color=%23RRGGBB |
| Player height | 450 | Iframe height (px) | — |
| Heading | — | Optional heading above player | — |
| Alignment | Center | Container alignment | — |
| Comments | On | Show comments overlay | show_comments=true/false |
| User info | On | Show uploader/user | show_user=true/false |
| Reposts | Off | Show reposts | show_reposts=true/false |
| Teaser | On | Show teasers | show_teaser=true/false |
| Hide related | Off | Hide related tracks | hide_related=true/false |
| Follow button | Off | Adds a CTA below player | — |
| Follow text | Follow on SoundCloud | Button label | — |
| Follow URL | (blank) | Destination (falls back to player URL) | — |
| Border | Off | Thin border around player | — |
| Radius | 8 | Corner radius when border is on | — |
| Module Class Suffix | — | Extra CSS hook | — |
| Lazy‑load iframe | On | Defer loading near viewport | loading="lazy" (HTML) |
Styling Tips
Target the module via its wrapper class (e.g., .mod-scmp) and your Module Class Suffix. Keep overrides in your template assets.
/* Example (template CSS) */
.mod-scmp.scmp-alt .mod-scmp__btn { border-color: #ff5500; }
.mod-scmp.scmp-alt .mod-scmp__heading { font-weight: 700; }