-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Description
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&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F90097394&show_artwork=true&maxwidth=640&maxheight=960&dnt=1"></iframe>
</div>
</figure>In the Twenty Nineteen theme (and other WordPress themes) this is rendered responsively.
At 640px screen width:
At 320px screen width:
At 250px width:
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.


