Solution 1 :

Would such an example work?

* {
    background-color: #1D1E22;
    color: white;
    font: 1rem Consolas;

ol {
  --color: #C1C1C1;
  width: 200px;
  height: 100px;
  border: 1px solid var(--color);
  background: var(--color);
  margin-top: 35px;
  margin-left: 35px;
  border-radius: 3px;
  padding: 10px;
  overflow-y: scroll;

li {
  list-style-position: inside;

Problem :

I have this code,

<!doctype html>
      <style type="text/css">

        ul, li, ol {
.listWrapper {


      <meta charset="utf-8">
      <title>Video.js Playlist UI - Default Implementation</title>
      <link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
      <link href="node_modules/videojs-playlist-ui/dist/videojs-playlist-ui.css" rel="stylesheet">
      <link href="examples.css" rel="stylesheet">
      <div class="info">
         <h1>Video.js Playlist UI - Default Implementation</h1>
            You can see the Video.js Playlist UI plugin in action below. Look at the
            source of this page to see how to use it with your videos.
            In the default configuration, the plugin looks for the first element that
            has the class "vjs-playlist" and uses that as a container for the list.
      <div class="player-container">
            <source src="" type="video/mp4">
            <source src="" type="video/webm">
         <div class="vjs-playlist">
               The contents of this element will be filled based on the
               currently loaded playlist
      <script src="node_modules/video.js/dist/video.js"></script>
      <script src="node_modules/videojs-playlist/dist/videojs-playlist.js"></script>
      <script src="node_modules/videojs-playlist-ui/dist/videojs-playlist-ui.js"></script>
         var options = {
         autoplay: true, 
         controls: true, 
         muted: false, 
         fluid: true, 
         playbackRates: [1,1.25,1.5,1.75,2,2.25,2.5],
         inactivityTimeout: 0 // 0 indicates that the user will never be considered inactive.

          var player = videojs('video', options);

    "name": "S1E1.mp4",
    "sources": [
        "src": "",
        "type": "video/mp4"

    "name": "Frasier S1 D4-23.mp4",
    "sources": [
        "src": "",
        "type": "video/mp4"

         // Play through the playlist automatically.

         // Initialize the playlist-ui plugin with no option (i.e. the defaults).

And this style sheet.

  We include some minimal custom CSS to make the playlist UI look good
  in this context.

body {
  font-family: Arial, sans-serif;

.info {
  background-color: #eee;
  border: thin solid #333;
  border-radius: 3px;
  margin: 0 0 20px;
  padding: 0 5px;

.player-container {
  background: #1a1a1a;
  overflow: auto;
  width: 900px;
  margin: 0 0 20px;

.video-js {
  float: left;

#my-custom-element {
  float: left;
  width: 300px;

.vjs-playlist.vjs-playlist-horizontal {
  float: none;
  height: 120px;
  width: 600px;

When the above code renders it looks like this.
enter image description here

What I would like to do, is make the playlist section of the video-js player scrollable. In its current state, it is hard to navigate to a particular show.

Ideally, it would be a small box below the video player allowing me to scroll down while watching a show. I hope that makes sense.

Thank you for any input you can offer!