Skip to content

amp-soundcloud should support responsive layout #23144

@westonruter

Description

@westonruter

Given an example Soundcloud track:

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

When adding this as a Soundcloud embed block in WordPress, the output looks like the following:

<figure class="wp-block-embed-soundcloud wp-block-embed is-type-rich is-provider-soundcloud wp-embed-aspect-4-3 wp-has-aspect-ratio">
	<div class="wp-block-embed__wrapper">
		<iframe title="Mozart - Requiem in D minor Complete Full by Jack Villano Villano" width="640" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&#038;url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F90097394&#038;show_artwork=true&#038;maxwidth=640&#038;maxheight=960&#038;dnt=1"></iframe>
	</div>
</figure>

In the Twenty Nineteen theme (and other WordPress themes) this is rendered responsively.

At 640px screen width:

image

At 320px screen width:

image

At 250px width:

image

So Soundcloud supports a responsive iframe. Nevertheless, the amp-soundcloud component only supports the fixed-height layout. This is resulting in the AMP pages in WordPress not having visual parity with the non-AMP version.

In other words, it is desired that the AMP plugin be able to output:

<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" width="640" layout="responsive">
			<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>

But this is marked as invalid due to the unsupported responsive layout.

Please add support for responsive (and intrinsic) layout for the amp-soundcloud component.

/cc @asap @wassgha

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions