Indice

Important: this documentation is not applicable to your currently selected format stories!

amp-soundcloud

You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

Displays a Soundcloud clip.

Required Scripts

<script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"></script>

Supported Layouts

fill fixed fixed-height flex-item intrinsic nodisplay responsive

Examples

With the responsive layout, the width and height from the example should yield correct layouts for 1:1 aspect ratio embeds:

Visual Mode:

<amp-soundcloud
  width="480"
  height="480"
  layout="responsive"
  data-trackid="243169232"
  data-visual="true"
></amp-soundcloud>

Classic Mode:

<amp-soundcloud
  width="480"
  height="480"
  layout="responsive"
  data-trackid="243169232"
  data-color="ff5500"
></amp-soundcloud>

Attributes

data-trackid	This attribute is required if `data-playlistid` is not defined. The value for this attribute is the ID of a track, an integer.
data-playlistid	This attribute is required if `data-trackid` is not defined. The value for this attribute is the ID of a playlist, an integer.
data-secret-token (optional)	The secret token of the track, if it is private.
data-visual (optional)	If set to `true`, displays full-width "Visual" mode; otherwise, it displays as "Classic" mode. The default value is `false`.
data-color (optional)	This attribute is a custom color override for the "Classic" mode. The attribute is ignored in "Visual" mode. Specify a hexadecimal color value, without the leading # (e.g., `data-color="e540ff"`).
width and height	The layout for `amp-soundcloud` is set to `fixed-height` and it fills all of the available horizontal space. This is ideal for the "Classic" mode, but for "Visual" mode, it's recommended that the height is 300px, 450px or 600px, as per Soundcloud embed code. This will allow the clip's internal elements to resize properly on mobile.

Validation

See amp-soundcloud rules in the AMP validator specification.

Ti servono altre informazioni?

Hai letto questo documento decine di volte ma non risponde a tutte le tue domande? Forse ci sono altre persone col tuo stesso problema: entra in contatto con loro su Stack Overflow.

Vai a Stack Overflow

Hai trovato un bug o una funzione mancante?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Vai a GitHub