There are many very good reasons that can make you think of embedding a YouTube playlist on your website.
If you have a YouTube channel, embedding your YouTube playlist on your website is a great way to increase your online presence, increase YouTube video views, increase YouTube video rank and helping your audience find information on a specific category.
This post provides information you need to embed a YouTube playlist on a web page.
How to have a sample of a YouTube embed code:
- Go to the YouTube website and open a video that allow embedding.
- Click on the share button and choose embed.
- Click copy to copy the video embed code.
Below is the code to embed YouTube video on webpage
<pre><code>
<iframe width="560" height="315"> src="https://www.youtube.com/embed/videoID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
</pre></code>
Now to have the embed YouTube playlist code:
You must modify the above embed code of the YouTube video to make it work for a playlist. In the forward slash after embed and before the videoID, put a question mark and in place of the videoID, set the listType parameter to playlist and the list parameter to the YouTube playlist ID.
When you rewrite the source attribute in the above video embed code, you will have something like this: src=”https://www.youtube.com/embed?listType=playlist&list=PlaylistID”
To find the list of available parameters, please read the article on supported parameters on Google IFrame Player API.
Now it’s time to find the playlistID that you would like to use in the embed code.
Open the playlist and copy the ID.
This is my playlist of Computer Networks on YouTube and the playlist ID is PLvPCw2rQMJ7seRBAf-FJe5R7hF3mHAqmU
Finally, you have all the information you need to create the code to embed Htop Skills YouTube playlist Computer Networks.
<pre><code>
<iframe width="560" height="315"> src="https://www.youtube.com/embed?listType=playlist&list=PLvPCw2rQMJ7seRBAf-FJe5R7hF3mHAqmU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
</pre></code>
What To Read Next
- How to install XAMPP in Windows 10
- How to set CSS styles with jQuery
- When to create internal or external links in html
- How to detect which element is clicked using jQuery
- How to download the entire file in a website folder
If you like the content of this post or if it has been useful to you, please consider sharing it on your social media and follow me on Facebook and Twitter for more exclusive content.