HTML Iframes - Embed YouTube Playlist

HTML Iframe element <iframe> can be used to embed a YouTube playlist into a web page.

This can be achieved by simply pointing the source URL to YouTube playlist embed URL that contains playlist ID as shown below.

<iframe src="https://www.youtube.com/embed/videoseries?list=PLqUX34SwGksSwYW4yAt-EP4weN-Npgt_k" title="YouTube Playlist" width="800" height="450"></iframe>

Always include the below details in the iframe element.

  • Include title, which will be used by screen readers
  • Define width and height values using the attributes directly or by using the style attribute, as it is needed to make the iframe displayed properly

YouTube Playlist ID

YouTube playlist ID is required to embed it into a web page.

Follow the below steps to identify YouTube Playlist ID.

  • Go to YouTube and find and play the playlist that you like to embed
  • Inspect the URL to grab the playlist ID, which looks similar to the one below
    • https://www.youtube.com/watch?v=zPLB6D0-oxY&list=PLqUX34SwGksSwYW4yAt-EP4weN-Npgt_k

Example

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Iframes YouTube Playlist</h1>
    <iframe src="https://www.youtube.com/embed/videoseries?list=PLqUX34SwGksSwYW4yAt-EP4weN-Npgt_k" title="YouTube Playlist" width="800" height="450"></iframe>
</body>
</html>

Overall

HTML Iframes can be used to embed a YouTube playlist into a web page by pointing the source URL to its embed URL.