MyList Video Player

Fully responsive HTML5 video player featuring a scrolling thumbnail playlist. Uses latest YouTube API (V3) and dynamically loads YouTube playlist. 
View a demo and learn more at

Dynamically Loads YouTube Playlist
Just specify a YouTube playlist ID and this player will load that playlist. Anytime that playlist is updated on YouTube it will be reflected in this player.

Fully Responsive - The MyList Player uses responsive design (CSS media queries) to adapt to fit the screen size. The player will expand to fit the full width of whatever parent element you place it into.

Mobile Friendly - The MyList Player has been heavily tested in major iOS and Android phones and tablets. It is touch-friendly and you can scroll the playlist with a swipe as well as tapping the left and right arrows.

Customizable Options
  • Enable autoplay so that the next video in the playlist automatically plays when the current one ends
  • Show or hide the video titles that appear under each thumbnail in the playlist
  • Show or hide the video title that appears in the upper left of the video player
  • Show or hide the YouTube video player controls
  • Change default and hover state colors for the video titles in the playlist
  • Change default and hover state colors for the left and right arrows

Version History 
Version  1.4 - 3/26/2016
  • Playlist is now accessible (508 compliant). User can tab through thumbnails in playlist and hit Enter key to play selected video.
  • When autoplay is enabled and the last video in the playlist has finished playing, the player automatically starts playing the first video in the playlist. This fixed an issue where an error would show after last video.

Version  1.3 - 2/22/2016
  • Updates to mylist-player.js to allow for having multiple instances of the MyList Video Player on a single page.
Version 1.2 - 1/26/2016
  • Updates to mylist-player.js so that the video's poster image does not look pixelated on mobile devices.
Version 1.1 - 12/28/2015
  • Fixed bug where vertical page scroll on swipe did not work when finger was over playlist thumbnails on touch screen devices.
  • Changed the amount to scroll playlist horizontally per swipe or arrow click to be based on the player container width instead of the overall browser window width.
  • Updated CSS class names to be a bit more unique to avoid conflicts. For example .vid-container is now .mlvp-container.
  • Removed Left and Right arrows on really small screens (when only 2 or less thumbnails are showing in the playlist). The partially cut-off second thumbnail is a common indication that you can swipe for more.
Powered by