Now you can embed YouTube's Playlist Player App in your website or a blog <3
If you're figuring out what it looks like, you can checkout the demo below on my About page.
By Default, YouTube doesn't allow the to embed the 'exact' Playlist player that it uses for it's self just as what you see in the image below.
What you can embed though is a different design of the playlist player like below though that's not we actually look forward to :) SO lets see how you can embed the actual great one that I shared above in the demo.
Installation Requirements
1. You Need Your WebHosting where you can deploy the scripts- [message]
- Don't Have Web Hosting?
- If not, do comment below if you're using Blogger blogs and would like to see how you can add this to Blogger blogs. I would then go ahead and share how you can do that for Blogspot. InshaAllah.
Currently the tutorial targets if you've an access to your own web hosting. If you do, then you can use it on a Blogger blog too, as the scripts would be hosted there.
Step #1 Download The App/Plugin
Simply head over to the following link and download the plugin. Once you have the zip file, you'd then have to make few changes in the Javascript code to include your YouTube player's playlist ID and YouTube Channel ID.Step #2 Find Your Channel and Playlist IDs
Finding Your Desired YouTube Playlist IDs
To show your desired playlist videos in this player, you need the playlist IDs that YouTube gives you. You can find them as below.
1. Go to YouTube playlist of your choice and copy it's ID as shown in the image below.
2. Now simply find out your YouTube channel ID as shown in the image below. You can go to advanced account settings page and there you'll find it.
Once you have both of these things, you're all set to edit these out in the YouTube plugin code.
Step #3 Edit The Script as Mentioned Below.
Open up ytv.js file in any file editor on your computer (like Notepad++) and make the following changes as mentioned below in the image. Notice that I highlighted the playlist IDs that you want to show in the Plugin. You can add one or more.
Once you edit out that part. You're almost done. I'll tell you where and how to add these scripts to make them work. Simply follow the next step.
Step #4 Upload the Plugin Folder to Your Hosting
1. Now that you have edited that out, simply upload the plugin folder to your directory. Javascript and css file.
2. Simply add both the files in your header area of the template/page as shown below.
3. Now simply place the following code where you want the widget/plugin to appear.
Note that, where it says "channelId", you've to enter the previous noted down 'channelID' of yours.
That's all!
Once you do that, save the files you edited in your file manager of hosting and you're good to go.
Hope that was helpful for you.
Conclusion - Need Any Help?
In case you found anything confusing, you can always get back to me in the comments section of this and I would love to solve that. If you're willing to add that to a Blogger blog, do comment below, and I'll update this article for Blogger blogs too.
Best of luck! Enjoy this amazing plugin :)