How to Embed a YouTube Playlist on Your Website

Want to display multiple YouTube videos on your site without cluttering your page? Embed a playlist.

One embed. All your videos. Visitors can browse without leaving your site.

Create content, post everywhere

Create posts, images, and carousels with AI. Schedule to 9 platforms in seconds.

Quick Answer: YouTube Playlist Embed Code

Copy this code and replace PLAYLIST_ID with your playlist ID:

<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"
  allowfullscreen>
</iframe>

Find your playlist ID: Open your playlist on YouTube. The ID is in the URL after list=.

Example: youtube.com/playlist?list=PLrAXtmErZgOeiKm4sgNOknGvNjby9efdf

The playlist ID is: PLrAXtmErZgOeiKm4sgNOknGvNjby9efdf

Step-by-Step: Embed YouTube Playlist

Step 1: Get Your Playlist URL

Go to YouTube
Open your playlist (or any public playlist)
Copy the URL from your browser

URL format: https://www.youtube.com/playlist?list=YOUR_PLAYLIST_ID

Step 2: Get the Embed Code

Option A: From YouTube

Click Share below any video in the playlist
Click Embed
Check "Show playlist" option
Copy the embed code

Option B: Build it manually

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

Step 3: Add to Your Website

Paste the embed code into your website's HTML where you want the playlist to appear.

Quick Knowledge Check

Test your understanding

What's the correct URL format to embed a YouTube playlist?

💡

Hint: Remember: videoseries in the embed URL tells YouTube to load the full playlist, not just one video.

Embed YouTube Playlist by Platform

WordPress (Block Editor)

Copy your playlist embed code
Add a Custom HTML block
Paste the embed code
Preview and publish

Or use the URL method:

Add a new block
Paste the playlist URL directly
WordPress auto-converts to embed

WordPress (Elementor)

Add HTML widget
Paste embed code
Adjust width in widget settings

Wix

Click Add Elements (+)
Select Embed Code → Embed HTML
Paste your iframe code
Resize as needed

Squarespace

Add a Code Block
Paste the embed code
Click Apply
Adjust block settings for width

Shopify

Go to page/post editor
Click Show HTML (<>)
Paste embed code
Save

HTML Website

Paste directly into your HTML file:

<div class="video-container">
  <iframe
    width="100%"
    height="400"
    src="https://www.youtube.com/embed/videoseries?list=YOUR_PLAYLIST_ID"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

Customization Options

Change Size

Modify width and height attributes:

<!-- Fixed size -->
<iframe width="800" height="450" ...></iframe>
 
<!-- Responsive (100% width) -->
<iframe width="100%" height="400" ...></iframe>

Responsive Embed (CSS)

For fully responsive playlists:

<style>
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
 
<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/videoseries?list=YOUR_PLAYLIST_ID" allowfullscreen></iframe>
</div>

URL Parameters

Add parameters to customize behavior:

Parameter	Effect	Example
`autoplay=1`	Auto-play first video	`?list=ID&autoplay=1`
`mute=1`	Start muted (required for autoplay)	`?list=ID&autoplay=1&mute=1`
`loop=1`	Loop playlist	`?list=ID&loop=1`
`index=3`	Start at video #3	`?list=ID&index=3`
`rel=0`	Hide related videos	`?list=ID&rel=0`
`controls=0`	Hide player controls	`?list=ID&controls=0`
`modestbranding=1`	Minimal YouTube branding	`?list=ID&modestbranding=1`

Example with multiple parameters:

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

Quick Knowledge Check

Test your understanding

You want the playlist to autoplay when the page loads. What parameters do you need?

💡

Hint: Chrome, Safari, and Firefox all block autoplay with sound. Always pair autoplay=1 with mute=1.

Embed Options Comparison

Method	Ease	Customization	Load Speed
YouTube iframe	Easy	Medium	Medium
YouTube API	Hard	Full	Medium
Third-party widgets	Easy	High	Varies
Lazy loading	Medium	Medium	Fast

Lazy Loading for Better Performance

Load the playlist only when users scroll to it:

<iframe
  loading="lazy"
  src="https://www.youtube.com/embed/videoseries?list=YOUR_ID"
  width="560"
  height="315"
  allowfullscreen>
</iframe>

The loading="lazy" attribute delays loading until the iframe is near the viewport.

Common Issues & Fixes

Playlist Not Showing

Problem: Only one video appears, no playlist.

Fix: Make sure you're using /embed/videoseries?list= not /embed/VIDEO_ID?list=

Embed Not Working

Problem: Blank space or error.

Causes:

Playlist is private or unlisted
Playlist was deleted
Embedding disabled by owner

Fix: Use a public playlist or your own playlist with embedding enabled.

Not Responsive on Mobile

Problem: Video overflows on small screens.

Fix: Use the responsive CSS wrapper shown above, or set width="100%".

Autoplay Not Working

Problem: Video doesn't autoplay.

Fix: Add both autoplay=1 and mute=1. Browsers require muted autoplay.

YouTube Playlist Embed vs Single Video

Feature	Single Video	Playlist
Multiple videos	No	Yes
Viewer navigation	No	Built-in
Better for tutorials	Maybe	Yes
SEO benefit	Single	Multiple
User experience	Simple	Rich

Use playlists when:

You have a series (tutorials, episodes)
You want to keep visitors on your site longer
You're showcasing multiple products/features

Privacy-Enhanced Mode

Use youtube-nocookie.com for GDPR compliance:

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

This prevents YouTube from storing tracking cookies until the user plays a video.

For EU visitors, consider:

Loading placeholder image first
Asking for consent before loading embed
Using a cookie consent banner

Alternative: YouTube API

For advanced customization, use the YouTube IFrame API:

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

API advantages:

Full JavaScript control
Custom events (on play, pause, end)
Dynamic playlist changes
Better analytics tracking

Quick Reference

Basic Embed

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLAYLIST_ID" allowfullscreen></iframe>

Responsive Embed

<div style="position:relative;padding-bottom:56.25%;height:0;">
<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/videoseries?list=PLAYLIST_ID" allowfullscreen></iframe>
</div>

Privacy-Enhanced

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

YouTube Guides:

Embedding & Widgets:

Video Marketing:

TL;DR - Quick Answer