How to Embed YouTube Playlists in a Website

H
Published in: Embed - YouTube

youtube video playlist

If you are planning to embed multiple YouTube videos on a web page, you may even consider putting all these videos into a single YouTube playlist and then embed the playlist into your page. This offers two advantages:

1. You can squeeze in more video content in the same amount of (visual) space.

2. A video playlist will reduce the (byte) size of your web page considerably because, technically, you now have to embed the YouTube Flash video player only once on your page.

How to Embed YouTube Video Playlists

The default embed code for any YouTube video playlist looks something like this (remember to replace the word “ID” with the actual YouTube playlist ID) :

 <object width="480" height="385">
 <param name="movie" value="http://www.youtube.com/p/ID"></param>
 <param name="allowFullScreen" value="true"></param>
 <param name="allowscriptaccess" value="always"></param>
 <embed src="http://www.youtube.com/p/ID" width="480" height="385"
 type="application/x-shockwave-flash" allowscriptaccess="always"
 allowfullscreen="true"></embed></object>

If you find the above code confusing, there a much simpler way as well.

YouTube offers an IFRAME option for embedding individual videos and the same code can be extended to embed video playlists as well.

<iframe src="http://www.youtube.com/embed/videoseries?list=ID"
width="100%" height="500" frameborder="0"></iframe>

You may have to modify the value of height and width attributes to make the video player fit your page.

What’s the advantage? The code looks clean and, going forward, Google could make these playlists HTML5 ready. Then your existing video playlist will play on browsers that don’t have the Flash plugin without you having to change the embed code.

Here’s a sample YouTube playlist embedded using the new IFRAME style.

Also see: Embed Anything in your Web Pages

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: Embed - YouTube

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
A
Amit Agarwal

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account
G

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube