How to Embed a YouTube Playlist on Your Website

Quick answer: grab the playlist ID from the list= part of the playlist URL, drop it into the iframe below, and paste that into any HTML block on your site. One embed, every video, with the playlist queue built into the player.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/videoseries?list=PLAYLIST_ID"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen>
</iframe>

That is not a hand-rolled snippet. It is the markup YouTube's own oEmbed endpoint returns when you hand it a playlist URL, which is the closest thing to a canonical playlist embed that exists.

Create content, post everywhere

Create captions, images, and videos with AI. Schedule to 9 platforms in seconds.

Start your free trial

Jump to:

• Get Your Playlist ID
• Add the Embed to Your Site
• Player Parameters That Actually Work
• Make the Embed Responsive
• Why Your Playlist Embed Is Broken
• Privacy Enhanced Mode and GDPR
• Playlist vs Single Video Embed
• Advanced Control With the IFrame API
• Frequently Asked Questions

Get Your Playlist ID

Open the playlist on YouTube. The URL looks like this:

https://www.youtube.com/playlist?list=PLC77007E23FF423C6

Everything after list= is the playlist ID. In that example it is PLC77007E23FF423C6.

The first two characters tell you what kind of playlist you have, and they all embed the same way:

The UU prefix is the useful one nobody mentions. Every channel has a hidden uploads playlist that always contains its newest videos, and you build the ID by taking the channel ID and swapping the leading UC for UU. Channel UC_x5XG1OV2P6uZZ5FSM9Ttw becomes playlist UU_x5XG1OV2P6uZZ5FSM9Ttw. Embed that and your site shows the channel's latest uploads forever without you touching the code again.

The zero-guesswork way to get the embed code

If you would rather not build the URL by hand, ask YouTube for it. Paste this into your browser's address bar with your own playlist URL on the end:

https://www.youtube.com/oembed?format=json&url=https://www.youtube.com/playlist?list=PLAYLIST_ID

YouTube returns a small block of JSON containing an html field with a ready-made iframe, plus the playlist title, the channel name, and a thumbnail URL. If that request errors out, the playlist is not publicly embeddable and no amount of hand-written HTML will fix it. It is a 5 second pre-flight check.

Add the Embed to Your Site

Every platform needs the same thing: somewhere that accepts raw HTML. Only the name of the box changes.

WordPress auto-embed works because WordPress calls the same oEmbed endpoint shown above, so a bare youtube.com/playlist?list=... URL on its own line turns into a real playlist embed rather than a link. If you need parameters like autoplay, skip auto-embed and use the Custom HTML block instead, because auto-embed strips them.

Two URL forms, both valid

There are two ways to point the player at a playlist and both currently load:

<!-- The form YouTube's oEmbed endpoint returns -->
<iframe src="https://www.youtube.com/embed/videoseries?list=PLAYLIST_ID" allowfullscreen></iframe>
 
<!-- The form shown in YouTube's player parameter reference -->
<iframe src="https://www.youtube.com/embed?listType=playlist&list=PLAYLIST_ID" allowfullscreen></iframe>

The IFrame Player API reference documents the listType=playlist version and notes that when you supply list and listType, "the IFrame embed URL does not need to specify a video ID." The videoseries path is the older form, but it is still what YouTube hands out today, so there is no reason to migrate working embeds.

To start the playlist on a specific video, put that video's ID in the path and keep the playlist in the query string:

<iframe src="https://www.youtube.com/embed/VIDEO_ID?list=PLAYLIST_ID" allowfullscreen></iframe>

Player Parameters That Actually Work

This is where most playlist embed tutorials are years out of date. YouTube has quietly killed several parameters that still circulate on blogs and Stack Overflow answers.

Three of these deserve a longer explanation, because getting them wrong is what makes an embed look broken.

modestbranding is dead. YouTube's IFrame Player API reference now carries the flat statement that the parameter "is deprecated and has no effect," and the revision history dates that change to 15 August 2023. If a tutorial tells you to add it to strip YouTube branding, that tutorial has not been updated in three years. Branding is now decided by the player itself based on size and other signals. Delete the parameter, it is pure noise in your URL.

rel=0 no longer means "no related videos." The reference is explicit that after the September 2018 change, setting rel=0 means related videos "will come from the same channel as the video that was just played." You cannot switch off end-of-video suggestions with a URL parameter. On your own channel's playlist, rel=0 is still worth setting, because it keeps the suggestion grid pointed at your own content instead of a competitor's.

mute=1 is not in YouTube's published parameter list, yet it is the single most important parameter for autoplay. Browsers block autoplay with sound, so autoplay=1 on its own silently does nothing on most visits. Pair them:

<iframe src="https://www.youtube.com/embed/videoseries?list=PLAYLIST_ID&autoplay=1&mute=1" allowfullscreen></iframe>

One caveat on loop: for a playlist, loop=1 on its own is enough. Looping a single video is the awkward case, because the reference tells you to set loop=1 and also set the playlist parameter to the same video ID that is already in the URL path.

Make the Embed Responsive

Fixed width and height attributes overflow on phones. Wrap the iframe in a padded box instead:

<style>
.yt-playlist {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.yt-playlist iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
</style>
 
<div class="yt-playlist">
  <iframe
    src="https://www.youtube.com/embed/videoseries?list=PLAYLIST_ID"
    loading="lazy"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen>
  </iframe>
</div>

Two things worth keeping in that snippet. loading="lazy" tells the browser not to fetch the player until the iframe is near the viewport, which matters because a YouTube embed pulls a large amount of JavaScript. And if your page has a modern CSS baseline you can use aspect-ratio: 16 / 9 on the iframe directly instead of the padding trick, which is far less code.

If page speed is the real concern, the strongest option is not an iframe at all: render a static thumbnail and only inject the iframe on click. That drops the YouTube payload from the initial page load entirely. The same logic applies to other social embeds, which we cover in the social media aggregator guide.

Why Your Playlist Embed Is Broken

Work down this list in order. The causes are ordered from most common to most obscure.

1. Only one video plays, no queue appears. You used /embed/VIDEO_ID without a list= parameter, or you used ?playlist= instead of ?list=. The playlist parameter takes a comma separated list of video IDs, not a playlist ID. They are different things with confusingly similar names.

2. The player loads but says the video is unavailable. YouTube Help lists three reasons a video will not appear inside an embedded playlist: the uploader disabled embedding on it, the video is age restricted, or the video is private and has not been shared with you. A single bad video does not always break the whole playlist, but a playlist made mostly of other people's videos can end up mostly empty.

3. The playlist itself is private or unlisted. Unlisted playlists do embed. Private ones do not. Check the playlist's visibility setting, not just the visibility of the videos inside it.

4. Everything is blank and you see "error 153." This one is almost never diagnosed correctly. YouTube's Help documentation states that its Terms of Service "require embedders to provide a HTTP Referer" and that "if this information is missing, viewers attempting to watch embedded YouTube videos will encounter blocked playback and an error screen ('error 153')." That happens when your site sends Referrer-Policy: no-referrer, when the page is opened from a file:// path during local testing, or when you load the embed URL directly in a browser tab with no parent page. The fix is to set referrerpolicy="strict-origin-when-cross-origin" on the iframe, which is exactly what YouTube's own generated markup uses, and to test on a real http or https origin rather than a local file.

5. Autoplay does nothing. Add mute=1. See the parameter section above.

6. It works for you, breaks for visitors. You are signed in and they are not. Always test a playlist embed in a private window, signed out, before you call it done.

7. A consent banner is swallowing the embed. Many cookie tools block third party iframes until consent is given, replacing them with a placeholder. That is the tool working correctly, not a YouTube problem.

Privacy Enhanced Mode and GDPR

Swap the domain and nothing else changes:

<iframe src="https://www.youtube-nocookie.com/embed/videoseries?list=PLAYLIST_ID" allowfullscreen></iframe>

Be precise about what this buys you. YouTube's Help documentation describes privacy enhanced mode as preventing "the use of views of embedded YouTube content from influencing the viewer's browsing experience on YouTube," and says that ads served on those videos are non-personalized and that views "will not be used to personalize advertising shown to the viewer outside of your site or app."

Read that carefully: it is a personalization control, not a "no cookies" guarantee, and Google does not describe it as GDPR compliance. The nocookie domain still sets storage in some situations. If you have EU visitors and you need to be safe, the reliable pattern is still consent gating: show a static thumbnail with a play button, and only insert the iframe after the visitor clicks or accepts your cookie banner. Privacy enhanced mode is a sensible default on top of that, not a replacement for it.

Playlist vs Single Video Embed

The last row is the one people forget. On a phone, the playlist queue panel is collapsed, but on a narrow sidebar embed it can take a meaningful slice of the player width. If your embed is under roughly 400 pixels wide, a single video usually looks better.

Playlists also age better. Add a new video to the playlist and every page that embeds it updates automatically, which is why the UU uploads-playlist trick above is so useful for a "latest videos" section. If you are building that kind of module, the YouTube widget guide covers the display options, and adding videos to a playlist covers the upkeep.

Advanced Control With the IFrame API

If you need JavaScript control, playback events, or the ability to swap playlists without reloading the page, use the IFrame Player API instead of a plain iframe:

<div id="player"></div>
<script>
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    playerVars: {
      listType: 'playlist',
      list: 'PLAYLIST_ID'
    }
  });
}
</script>
<script src="https://www.youtube.com/iframe_api"></script>

What this unlocks that a plain iframe cannot do: player.nextVideo() and player.playVideoAt(index) for custom navigation, onStateChange events so you can fire analytics when a viewer finishes a video, and player.loadPlaylist() to swap the whole queue on the fly. The cost is a second script request and code you now have to maintain. For a static "here are our tutorials" section, the plain iframe is the right call.

Full reference: YouTube IFrame Player API and the player parameters list.

Frequently Asked Questions

Related Reading

• YouTube Widget for Website
• How to Add Videos to a YouTube Playlist
• YouTube SEO Checklist
• Embed an Instagram Feed on Your Website
• How to Embed Tweets
• Benefits of YouTube for Business