Embedding a YouTube Channel (not only) in AMP

This is a simple tutorial for embedding a YouTube channel into an AMP. With a small modification, this can be used for any website.

I recently started a YouTube channel about JavaScript. To promote it I wanted to embed the latest video on my home page. It is easy, but it is not straightforward.

1. Embedding single video is easy

When you want to embed a single video, it is super easy. There is a share button which will display the HTML code. Technically it is an iframe with URL in the form youtube.com/embed/W056nRs4IS8. That W056nRs4IS8 is called video id (the part after youtube.com/watch?v=).

In AMP it is also easy, you just follow the instructions on amp-youtube component documentation. You pass the video id to data-videoid attribute. It will look like this:


Unfortunately, there is nothing for the whole channel. But there is a trick!

2. A playlist CAN be embedded

A little known fact–at least it was to me until a few minutes ago–is that you can embed a playlist, too. Yes, you can embed a YouTube playlist to any page. There is an official documentation page about this.

You have the change the HTML code to a new URL, for example: youtube.com/embed/videoseries?list=PLTkA4bsrp6QSjjdjQpsScRFMgEvgJJICV. Where that long code is playlist id.

In AMP there are two tricks. First, AMP does not understand the video id, it just inserts it to the URL. So we can write videoseries instead of the id.

Second, you can pass custom params with special data-param-* attribute. We need to add a list attribute with the playlist id.

Combined, it looks like this:


If only there was a playlist for the channel. Except, …

3. There is a playlist for the whole channel

If the previous was a little know fact, this comes to me as a true shock.

This links to the channel playlist

Accidentally, I discovered that when you click on that little ‘Play all’ link on the video page, you get to a playlist video for your channel.

Then you just copy the playlist id (it look very much like channel id but is different). And use it like in the previous step.

You are done!

Unfortunately, this embed does not work on Medium. You can check it on my home page.

Did you find it useful? Where do you promote your channel? Are there more tricks I should know? Let me know in the comments!

Intro photo by Leon Bublitz.

This article was cross-posted to Medium, please use discussion there.

Latest posts

  • 2 min read

3 Mistakes That Give Microservices a Bad Name

I’m sad to see that microservices are falling in popularity among architects and developers. Some say they are unnecessarily complex or overengineered. That one needs to learn so many new tools and technologies. That they introduce problems we had already solved. However, many ‘do microservices’ (unintentionally) wrong…

Read More

  • 1 min read

Why Developers Should Stop Using ISO 8601 for Date-Time

When documenting APIs, developers often link to ISO 8601 as the standard for computer-readable date and date-time format. Dates and times (and time zones!) are complicated. There are so many edge cases and pitfalls. I’m sure every developer has a battle story about them. It’s good to delegate that hard work to somebody else. So when an international body that everybody knows and trusts publishes such a standard, it’s no surprise all the API designers start referring to it.

Read More