EverWeb Codebox

SoundCloud Audio Player & SoundCloud Stratus

Basic Player

Login to Soundcloud, find the track and click the Share button. Choose "Embed" from the drop down and copy the iFrame code. It should look like this...


<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/79493697&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>


Delete the code marked in blue and replace it with this...


style="width:100%;height:125px;border:none;margin:0;padding:0"


... so that the code looks like this...


<iframe style="width:100%;height:125px;border:none;margin:0;padding:0" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/79493697&color=0066cc&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>


Change the value for height to whatever you want.

Drag an HTML snippet onto the page, paste in the code and click the "Apply" button.

Now drag the Snippet to whatever width you require and adjust its height to suit the player height entered into the code.

To create more players, duplicate the first one and change the track ID number which is marked in purple in the above code.

Customizing The Player

The play button color can be changed by using a different hex color number where marked in green. Note that the number is entered without the hash sign.

The player above has had rounded corners and a box shadow added using CSS like this...


style="width:600px;height:125px;border:none;margin:0;padding:0;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000"


Any item in the code that uses false can be changed to true and vice versa. For example - auto_play=false&; can be changed to auto_play=true&

SoundCloud Stratus

The player glued to the bottom of the page is the SoundCloud Stratus. This can be set to be on the top or the bottom.

Unfortunately, the Developers of EverWeb have kind of shot us in the foot for using this by forcing us to use jQuery V1.9.1 on every page of our websites - whether we want it or not.

Stratus will only work with older versions of jQuery up to V 1.8.