Responsive, Cross-platform Playlists in Jekyll

  2 minute read

I wanted to embed playlists in my posts in Music Naka. Now that doesn’t sound too difficult, given that services like YouTube, Spotify or Apple Music provide drop-in code for iframe embeds. But it was not so straightforward because different people use different music services.

Requirements

I wanted a solution which worked as follows:

  1. Create a playlist in one platform and have it automatically exported to as many other music platforms as possible.
  2. Embed a music player which allows the user to select the music platform of their choice to listen to the same playlist.

Solution

I found the answer - Soundsgood provides a cross-platform music player and playlist creation tool! Here is an official post from Soundsgood that explains how it works.

After you follow their process of making the playlist, you can get their embed code, which looks like this:

<iframe src="https://play.soundsgood.co/embed/5abe3768b78a710611a642ea" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

It has a generic Soundsgood URL, followed by an alpha-numeric string identifying your playlist.

Jekyll-friendly solution

Rather than drop this code in everytime, I wanted a Jekyll-friendly solution which I could use like this:

{% include video id="5abe3768b78a710611a642ea" provider="soundsgood" %}

The theme I am using has a Jekyll include for responsively embedding videos courtesy of Embed Responsively. You can check out the full include here. But briefly, it inserts the video_id into the appropriate embed code, depending on the video_provider. For invoking the Soundsgood embed, I added the following lines:

{% elsif video_provider == "soundsgood" %}
  <iframe src="https://play.soundsgood.co/embed/{{ video_id }}?color=52adc8&&hideCurator=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

I set a couple of Soundsgood-specific attributes: the color to match the colour scheme used on my website, and the hideCurator attribute to prevent my profile picture from appearing. This almost worked - “almost”, because on devices with very small width, the buttons on the Soundsgood player got all scrunched up and started overlapping one another.

Soundsgood player with buttons overlapping one another

Final tweak

This was because Embed Responsively’s responsive-video-container was set to maintain a 16:9 aspect ratio across all screen sizes. I added a min-height specification to the CSS like this:

.responsive-video-container {

  min-height: 300px;

}

That did the trick!

Soundsgood player with buttons not overlapping one another

Now I have an embedded playlist which stretches to 16:9 when possible, but always maintains a minimum height on narrow screens, so the buttons don’t overlap.

That concludes how I embedded responsive, cross-platform playlists in Music Naka.

Feedback: Did you enjoy reading or think it can be improved? Don’t forget to leave your thoughts in the comments section below! If you liked this article, please share it with your friends, and read a few more!

Leave a comment

Loading...