How to resize your SoundCloud widget using CSS

Since I’ve had a few requests from people who are using the SoundCloud Ultimate plugin asking how they can resize their SoundCloud player widget I thought I would write this short post explaining how you can achieve this.

Step 1:

When you are entering the SoundCloud Ultimate shortcode on your page, wrap it inside a CSS div with a classname of your choice. See the code below:

<div class="scu-player">
[soundcloud_ultimate track=https://api.soundcloud.com/tracks/your-trackname]
</div>

Note how the SCU shortcode is inside the “div” elements. Also, in this example I’ve chosen a CSS classname of “scu-player” but you can choose any name you like as long as it is unique. You will then use this CSS classname for the next step.

Step 2:

Add the following code to your theme’s CSS file:

.scu-player{
max-width: 310px;
}

.scu-player iframe{
height: 160px;
}

 

Alternative Tip For Step 2:

Instead of modifying your theme’s CSS file, an even better thing to do would be to go and grab the following plugin:

http://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413

Then add the above CSS code in the settings of the custom css plugin.

The above example will resize the SoundCloud player widget to have a width of 310px and height of 160px. You can choose any values you like to suit your needs.

I hope this post was helpful.