Simple Playlists Without JavaScript

HTML is a powerful language that has a lot of features. In the current JavaScript- and framework-heavy front-end culture, it's easy to lose sight of the native features of HTML in favor of more JavaScript bloat. There are many instances where JavaScript is used to poorly replicate what HTML can do for free.

In this post I'll cover how to make a simple embedded youtube playlist with only HTML.

Embedding a video is simple. Find any video on youtube and copy the embed code into your source:

<iframe width="560" height="315" src="https://www.youtube.com/embed/IvUU8joBb1Q?rel=0" frameborder="0" allowfullscreen></iframe>

Drop any of the attributes you don't need. In my case I don't need the width or height attributes because I'll be wrapping the <iframe> in a container to preserve aspect ratio:

<div data-aspect-ratio="16:9">
    <iframe src="https://www.youtube.com/embed/IvUU8joBb1Q?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

Give the <iframe> a [name] attribute:

<div data-aspect-ratio="16:9">
    <iframe name="playlist" src="https://www.youtube.com/embed/IvUU8joBb1Q" frameborder="0" allowfullscreen></iframe>
</div>

Now add a list of the links you want to play in the playlist. You can get the links by pulling them from the [src] attribute of the embed code:

<div data-aspect-ratio="16:9">
    <iframe name="playlist" src="https://www.youtube.com/embed/IvUU8joBb1Q" frameborder="0" allowfullscreen></iframe>
</div>
<ul>
    <li><a href="https://www.youtube.com/embed/IvUU8joBb1Q">Wintergatan - Marble Machine</a></li>
    <li><a href="https://www.youtube.com/embed/gHbwAd5gkMM">2CELLOS - Hysteria</a></li>
    <li><a href="https://www.youtube.com/embed/MLrC7e3vSv8">Mike Massé and Jeff Hall - Africa</a></li>
</ul>

And finally, add a [target] attribute to the links with the same value as the [name] attribute of the <iframe>:

<div data-aspect-ratio="16:9">
    <iframe name="playlist" src="https://www.youtube.com/embed/IvUU8joBb1Q" frameborder="0" allowfullscreen></iframe>
</div>
<ul>
    <li><a href="https://www.youtube.com/embed/IvUU8joBb1Q" target="playlist">Wintergatan - Marble Machine</a></li>
    <li><a href="https://www.youtube.com/embed/gHbwAd5gkMM" target="playlist">2CELLOS - Hysteria</a></li>
    <li><a href="https://www.youtube.com/embed/MLrC7e3vSv8" target="playlist">Mike Massé and Jeff Hall - Africa</a></li>
</ul>

The [target] attribute will tell the link to open in the browser context with the given name.

Final Result

The nice thing about this technique is that it works with any page that's embeddable within an <iframe>, so if you want to make a playlist that includes a mix of Vimeo and YouTube videos, or any other embeddable content, you can easily do so.

Bonus

As a bonus, you can add ?autoplay=1 to the links to make the videos automatically play when the links are clicked.

Additionally it's not particularly difficult to replace the link text with thumbnail images from the videos in the playlist. Just be sure to provide [alt] text for accessibility.