How to Embed YouTube Playlists in a Website

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.