YouTube Playlist Widget with Sidebar

A YouTube playlist widget shows a full playlist on your website: one featured player plus a queue sidebar visitors can scroll. This template gives you that layout ready to embed, and it stays in sync with the playlist on YouTube. Use it on course pages, product demos and help centers where viewers need to jump between videos.

What the YouTube playlist widget shows and where to place it

A YouTube playlist widget is an embedded block that plays videos from one YouTube playlist and lists the other videos next to the player. Visitors pick any video from the list instead of watching in a fixed order.

This template includes a featured video player, a playlist queue sidebar, a video details panel, playback controls, a completion indicator and a View on YouTube link. It runs on the YouTube playlist feed, which connects your playlist through the YouTube API.

Use it when you want to embed YouTube playlist with sidebar navigation on course and tutorial pages, product demo pages, creator and brand sites, help centers and landing pages. The layout is responsive, so the sidebar adapts to smaller screens.

• Homepage: a short playlist of intro videos answers first questions without sending visitors to YouTube.
• Pricing page: a demo playlist shows the product in action while visitors compare plans.
• Product pages: setup and how-to videos help buyers see how the product works.
• Landing pages: a focused playlist keeps viewers on the page and close to your call to action.

How to add a YouTube playlist widget to your website

1. Connect your YouTube playlist as a source in EmbedSocial.
2. Select the Video Playlist Widget template from the YouTube templates library.
3. Customize the title/description display and choose whether to show the queue sidebar.
4. Set the number of videos to load and sorting (default playlist order).
5. Copy the embed code (JavaScript or iFrame).
6. Paste it into your website (WordPress, Shopify, Wix, Squarespace, or custom HTML) and publish.

WordPress

1. Open the page in the block editor and add a Custom HTML block.
2. Paste the EmbedSocial embed code into the block.
3. Preview the page, then click Update or Publish.

Shopify

1. In your Shopify admin, go to Online Store, then Themes, and click Customize.
2. Open the page or template where the widget should appear and add a Custom Liquid section.
3. Paste the embed code into the section and click Save.

Wix

1. Open the Wix Editor and click Add Elements.
2. Choose Embed Code, then Embed HTML, and place the element on the page.
3. Click Enter Code, paste the embed code, click Update and publish the site.

Squarespace

1. Edit the page and click Add Block where the widget should go.
2. Choose Code and paste the embed code into the block.
3. Save the page and check the result on the live site.

Playlist sidebar vs other layouts

Native YouTube embed vs playlist widget

YouTube lets you embed a playlist for free. Open the playlist, click Share, choose Embed and copy the iframe code into an HTML block on your page.

That native embed gives you one player in a fixed design. Visitors can’t scan the whole playlist on your page, and you can’t change the layout to match your site.

A playlist widget keeps the YouTube player and adds what the iframe lacks:

• A visible queue sidebar with every video in the playlist
• A details panel with the title and description of the current video
• Automatic updates when you add videos to the playlist on YouTube
• Options to handpick videos or filter them by date or keywords
• Custom styling, including your own CSS

For a full walkthrough of both methods, read how to embed a YouTube playlist.