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.
Also see: Embed Anything in your Web Pages
Amit Agarwal
Google Developer Expert, Google Cloud Champion
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.
Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory