SoundCloud example

Using the iFrame - SoundCloud content type

This content type embeds SoundCloud audio on your pages.

It's a two stage process.

  • Stage 1: Get your embed code from the SoundCloud website
  • Stage 2: Add this to the iFrame - Soundcloud content type

Stage 1 - Getting the embed code

1. Click the Share icon on the SoundCloud page of the audio you want. (See red arrow in Fig 1.)

Fig 1
Fig 1

2. Select the Embed tab and copy the entire contents of the Code and preview field. It starts with: <iFrame width='100%'  (See second arrow in Fig 2)

Fig 2
Fig 2

 The code should look something like this... 

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

... use the complete code starting  <iframe  and ending </iframe>

Stage 2 - Adding SoundCloud

3. Add an instance of iFrame - Soundcloud to your page. (See How to add a Content type)

4. Paste the complete SoundCloud code (see above) into the Embed code * field. You might need to edit the embed code;  make sure that the width is set to 100% and the height to 450 eg:  <iframe width="100%" height="450" scrolling="no".....

See table below for a full list of this content type's fields.

Form fields for the IFrame - Soundcloud content type

Field titleWhat should I do?Is it compulsory?
Name* This name will appear behind the scenes and needs to clear and concise so any other editors can quickly identify the content type they need to edit from all the others on the page Yes
Block title* This field is for screen readers. Give the widget a title, you can hide it if necessary (see below). Yes
Show block title? This default to Yes, select No if you want to hide the title. No
Embed code* Paste the SoundCloud embed code, see Stage 1 above. Yes