Skip to content

Improve Soundcloud embed: support playlists, preserve visual/height params, include fallback content#2722

Merged
swissspidy merged 6 commits intodevelopfrom
fix/soundcloud-playlist-support
Jul 2, 2019
Merged

Improve Soundcloud embed: support playlists, preserve visual/height params, include fallback content#2722
swissspidy merged 6 commits intodevelopfrom
fix/soundcloud-playlist-support

Conversation

@westonruter
Copy link
Copy Markdown
Member

@westonruter westonruter commented Jul 1, 2019 •
edited
Loading

Fixes #2715.

  • Add support for Soundcloud playlists
  • Preserve visual param to match the non-AMP version.
  • Preserve height param so the height is largely the same as the non-AMP version. Note that there is not a 1:1 match yet because amp-soundcloud does not support the responsive layout. See amp-soundcloud should support responsive layout amphtml#23144.
  • Add fallback content with a link to the original Soundcloud link with its title; this improves accessibility and indexability.

Build for testing: amp.zip (1.2.1-alpha-20190702T011358Z-e864ea9d)

Non-AMP version

Track embed: https://soundcloud.com/jack-villano-villano/mozart-requiem-in-d-minor

image

Playlist embed: https://soundcloud.com/classical-music-playlist/sets/classical-music-essential-collection

image

Old AMP Version

Track embed:

image

<figure class="wp-block-embed-soundcloud wp-block-embed is-type-rich is-provider-soundcloud  wp-has-aspect-ratio">
	<div class="wp-block-embed__wrapper">
		<amp-soundcloud data-trackid="90097394" layout="fixed-height" height="200"></amp-soundcloud>
	</div>
</figure>

Playlist embed:

(Fails to render)

<p><a href="" class="amp-wp-embed-fallback"></a></p>

New AMP Version

Track:

image

<figure class="wp-block-embed-soundcloud wp-block-embed is-type-rich is-provider-soundcloud  wp-has-aspect-ratio">
	<div class="wp-block-embed__wrapper">
		<amp-soundcloud data-trackid="90097394" data-visual="true" height="400" layout="fixed-height">
			<a fallback href="https://soundcloud.com/jack-villano-villano/mozart-requiem-in-d-minor">Mozart – Requiem in D minor Complete Full by Jack Villano Villano</a>
		</amp-soundcloud>
	</div>
</figure>

Playlist:

image

<figure class="wp-block-embed-soundcloud wp-block-embed is-type-rich is-provider-soundcloud  wp-has-aspect-ratio">
	<div class="wp-block-embed__wrapper">
		<amp-soundcloud data-playlistid="40936190" data-visual="true" height="450" layout="fixed-height">
			<a fallback href="https://soundcloud.com/classical-music-playlist/sets/classical-music-essential-collection">Classical Music – The Essential Collection by Classical Music</a>
		</amp-soundcloud>
	</div>
</figure>

@googlebot googlebot added the cla: yes Signed the Google CLA label Jul 1, 2019
@westonruter westonruter mentioned this pull request Jul 1, 2019
Closed
@westonruter westonruter force-pushed the fix/soundcloud-playlist-support branch from a36b159 to e864ea9 Compare July 2, 2019 01:11
@westonruter westonruter requested a review from swissspidy July 2, 2019 01:15
@westonruter westonruter added this to the v1.2.1 milestone Jul 2, 2019
@swissspidy swissspidy merged commit bec6d2c into develop Jul 2, 2019
@swissspidy swissspidy deleted the fix/soundcloud-playlist-support branch July 2, 2019 08:58
@westonruter westonruter mentioned this pull request Aug 9, 2019
Merged
7 tasks
@westonruter
Copy link
Copy Markdown
Member Author

westonruter commented Aug 9, 2019

  • Preserve height param so the height is largely the same as the non-AMP version. Note that there is not a 1:1 match yet because amp-soundcloud does not support the responsive layout. See ampproject/amphtml#23144.

This can now be revisited as of #3003.

This was referenced Sep 26, 2019
Closed
Merged
@westonruter westonruter mentioned this pull request Oct 24, 2019
Merged
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@swissspidy swissspidy swissspidy approved these changes

Assignees

No one assigned

Labels

cla: yes Signed the Google CLA

Projects

None yet

Milestone

v1.2.1

Development

Successfully merging this pull request may close these issues.

amp soundcloud playlist

3 participants

@westonruter @swissspidy @googlebot