InfoHeap
Tech
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

Youtube tutorials

  • Create and embed youtube playlist
  • Create youtube video link from a specific start time
  • Embed youtube video slice
  • Enable youtube monetization and link to adsense
  • Upload closed captions youtube video
  • Create vanity url for your channel in youtube
 
  • Home
  • > Tutorials
  • > Youtube

How to create and embed youtube playlist

By admin | Last updated on Mar 21, 2016

YouTube has pretty nice playlist feature with lots of powerful options. You can add multiple videos to a list and play them together on YouTube site. You can also embed them to your own site.

How to create YouTube playlist

To create a YouTube playlist, visit a video (assuming you are logged in to YouTube), click Add to, type the new playlist name and then click create new playlist as shown below:
youtube-playlist-add-to-create-newNote that you can keep the list Public, private or unlisted. With unlisted list it is public but not discoverable through browse/search interfaces.

Embed YouTube playlist

You can embed any public YouTube playlist on your site. You can create your own playlists also and then embed them on your site. Here are quick steps:

  1. Visit channel’s video page. e.g. for channel infoheap the video page would be http://www.youtube.com/user/infoheap/videos. You can go to channel’s home page and then click videos also.
  2. Select Playlist from video instead of Uploads as shown below:
    youtube-channel-playlists-page
  3. Now click on the playlist image which will start playing all videos. You can stop the playing and click share. Then click Embed, share with playlist and then select start of playlist. This will display the iframe code which you can copy to you site.
    youtube-channel-share-public-playlistHere is how the sample code looks like:
    <iframe width="560" height="315" src="http://www.youtube.com/embed/NxJ0W-yz0LQ?list=PLiK8WqxIgktSaz4tzfDw1y6VMLJuQxU1e" frameborder="0" allowfullscreen></iframe>
    try it online

    Note that it is sharing the video with the playlist. So you will see two ids (videoid and playlistid) in the url.
  4. To embed a list without the video id of first video, you can use this code:
    <iframe width="560" height="315" src="http://www.youtube.com/embed/videoseries?list=PLiK8WqxIgktSaz4tzfDw1y6VMLJuQxU1e" frameborder="0" allowfullscreen></iframe>
    try it online

    This code can also be obtained from youtube ui by creating your own list and going to edit list ui and using the share link there.

Editing YouTube playlist

There are couple of things you can do with your own playlists like deleting videos and adding videos to it. One notable feature is to adjust the start and end time of a video in a playlist. Here is how the link to change start and end time looks like:
youtube-channel-playlist-edit-start-end-time-linkNote that this does not change the video start and end time. Start time and end time setting is specific to a playlist. When a member video is loaded in the playlist play, player jumps to the start time set on that video in the playlist and similarly finishes at end time and moves to next video.

Additional notes

If you want more advanced controls in embedding YouTube video list like skipping a video on user click, etc. then you should also explore YouTube javascript apis which gives you more advanced controls for embedding YouTube videos.

Suggested posts:

  1. Python selenium webdriver – quick start guide on Mac
  2. How to become Google verified author of your wordpress blog using Google+ profile
  3. HP 2515 printer review (deskjet ink advantage all-in-one)
  4. How to create youtube video link from a specific start time
  5. How to write custom css in wordpress
  6. Python – How to sort dictionary by values
  7. Linux iptables – Nat port forwarding using PREROUTING
  8. How to use wordpress facebook plugin comments box with lazy loading
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged Tutorials, Youtube
  • Browse content
  • Article Topics
  • Article archives
  • Contact Us
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | Company results | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries | InfoHeap Money

Copyright © 2025 InfoHeap.

Powered by WordPress