Table of Contents
Embedding a YouTube Playlist into your Website
Updated by Benjamin Norton
- First you will create a YouTube playlist
- Then add videos to it and organize the videos
- Then copy the URL for the Playlist
- Send the URL to PitchHub, who sends back "embed code"
- Put the "embed code" into your web site
- Example of how an embedded YouTube playlist appears
Create YouTube Playlist
- In the upper-left corner of the screen, click your profile, then click YouTube Studio
- On the left-side menu, click Play Lists
- At the top of the screen click New Playlist
- Make sure the list is set to Public visibility
In another tab, open your Channel videos:
- Click the upper-right profile then click Channel
- Click Videos then click the "..." menu for a video, then Save to Playlist
- Check the box for playlist that you want the video to be added to, then click "X"
The video will be saved into the playlist when you click "X"
Edit the Playlist
- Once you have videos added to the playlist, you can order them and remove them
- To change the order, click on the "handle" on the left side of the video
- To remove the video or perform other actions, click the right-hand action menu for a video
- To set the thumbnail for the entire playlist choose Set as playlist thumbnail
Create "embed code"
- Copy the YouTube playlist URL, which is simply the URL that is shown in the browser addressExample of a URL is:
- Use our free YouTube Playlist Embed Code Calculator
To create the embed code for a YouTube playlist, just insert your YouTube playlist URL below then press the Create & copy embed Code button.
- The "embed code" which will look something like this:
Put the "embed code" into your web site
The following two links show instructions for two WordPress variations. The embed code in the example is different but the instructions are the same.
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PL8YrVVvFJaqQk-31StcARGAaW59diuTNM&rel=0&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>