YouTube Playlist Player

Created with ❤ in Poland by lepo.co
A simple way to display playlists nicely on your website. Reponsively, using YT API V3.
This is an early version so there is still room for improvement.

Usage

Add a reference to the script and style

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rapiddev/[email protected]/ytpp.min.css">
<script src="https://cdn.jsdelivr.net/gh/rapiddev/[email protected]/ytpp.min.js"></script>

Place the player wherever you like

<div class="ytpp-player"
  data-playlist="PLpsBoYnu3xNbKE_i7crf55E8h7lgHp4bt"
  data-format="2by1"
  data-itemsheight="50"
  data-itemswidth="90"
  data-rounded="true"
  data-loop="true"
  data-autoplay="true"
  data-playnext="true"
  data-showcontrols="false"
  data-showtitles="false"
  data-showinfo="false"
  data-showrelated="false">
</div>

Finally, run the script

<script>
  new YTPP( { api: 'your_youtube_api_v3_key' } ).Show();
</script>

Global arguments

You can change the settings for all players during script initialization

<script>
  new YTPP(
  {
    debug: true,
    itemsHeight: 50,
    itemsWidth: 90,
    api: 'your_youtube_api_v3_key',
    show:
    {
      controls: true,
      related: false
    }
  }).Show();
</script>

Options available

Option	Description
api	Your private YouTube API V3 key Default: ''
playlist	Playlist embed ID Default: ''
format*	The aspect ratio of movies in your playlist Available: 16by9, 21by9, 2by1 Default: '16by9'
itemsheight*	The height of a single element in the slider. Default: 70 (px)
itemswidth*	The width of a single element in the slider. Default: 110 (px)
container*	The HTML element that the player will be placed in Default: null
rounded*	Adds rounded edges to the player and carousel items Default: true
playnext*	Automatically play next videos Default: true
autoplay*	Start playback automatically Default: false
showcontrols*	Show interface elements like play and next buttons Default: false
showtitles*	Show videos titles below thumbnails Default: false
showinfo*	Setting this parameter to FALSE causes the Player to not show information such as the movie title or uploader name before the movie starts. Default: false
showrelated*	This parameter determines whether the player should show similar movies after the video has finished playing. Default: false
loop*	After the entire playlist has played, the player will skip back to the first video and start over. Default: false
debug*	It displays a lot of information. Do not use in production. Default: false

*optional

License

YTPP is free and open source software licensed under MIT License. You can use it in private and commercial projects.
Keep in mind that you must include a copy of the license in your project.