search

unimelb / unimelb-design-system

A complete design system for the University of Melbourne
https://web.unimelb.edu.au
30 stars 12 forks source link

New Audio Media class for soundcloud embeds #769

Closed FPG-Github closed 7 years ago

FPG-Github commented 8 years ago

We are seeing people wanting to embed audio streaming from services like soundcloud as well as videos, would be useful to set up an audio media class similar to <section class="video"> for the embedding of audio streams from soundcloud.

Currently straight embedded streams look like this:

soundcloud-embed-raw

Normal wrapping with media class and sections has no effect, so have to adapt some wrappers to fix the issue, but they aren't very intuitive.

In the following screen grab, the first three embeds (and titles) are wrapped as:

  1. <p><iframe></iframe>text</p>
  2. <section class="code"><iframe></iframe><p>text</p></section>
  3. <figure class="code"><iframe></iframe><figcaption>text</figcaption></figure>

soundcloud-embed-wrapped

Note the 3rd option strips the spacing for anything under it - so best option is to probably add a audio class that renders similar to the code class in terms of layout.

Cheers.

waitingallday commented 8 years ago

This will likely be implemented as the 2nd option above, but with the label text aligning to the left, ie. a container class that snaps to 900px instead of the default 700px.

axelboc commented 7 years ago

Turns out that SoundCloud embeds were already supported, but not documented. I have, however, introduced a new embed component to replace the old video and soundcloud classes, which had some issues. This will be available in v7.