Trying to Use VideoJS, VideoJS-YouTube, VideoJS-Playlist, and VideoJS-Playlist-UI

Question

I'm working on a website where I'm trying to make a custom themed playlist to play videos hosted on YouTube. I've successfully used VideoJS & VideoJS-YouTube together in another part of the site, but after introducing VideoJS-Playlist & VideoJS-Playlist-UI, I've ran into some issues. After attempting a few different ways of loading up the YouTube video, no source seems to come through. I do have a playlist being rendered however, which makes me think I'm either implementing VideoJS-YouTube incorrectly.

Here's my working example without VideoJS-Playlist & VideoJS-Playlist-UI:

Working CodePen Example

OR

<video class="videos-video video-js vjs-default-skin vjs-big-play-centered" controls data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=voFRslp8d60"}], "youtube": { "ytControls": 1 } }'></video>

Here's my not working example, using VideoJS-Playlist & VideoJS-Playlist-UI:

Broken CodePen Example

HTML:

<div>
  <video id="current-video" class="video-js vjs-default-skin vjs-big-play-centered"></video>
</div>
<div>
  <div class="vjs-playlist vjs-playlist-vertical vjs-csspointerevents vjs-mouse"></div>
</div>

AND JS:

var options = {
    techOrder: ["youtube"],
    youtube: {
        ytControls: 1
    }
};
var player = videojs('current-video', options);

player.playlist([{
    sources: [{
        src: 'https://www.youtube.com/watch?v=voFRslp8d60',
        type: 'video/youtube'
    }]
}]);

player.playlistUi();

If there's a way to get a YouTube video playing using these two extra plugins, I'll take any advice as to how. Thank you!

Answer 1

I found out the answer! Funnily enough, following the documentation from VideoJS-YouTube's GitHub Page was what led me astray. Instead of setting up special attributes for the plugin, if you install the plugin and then treat the resource as a regular source, the video loads perfectly. A detailed example of how to load it correctly is available here, or through the snippets below:

HTML:

<div>
  <video id="current-video" class="video-js vjs-default-skin vjs-big-play-centered" controls></video>
</div>

JS:

var player = videojs('current-video');

player.playlist([{
    sources: [{
        src: 'https://www.youtube.com/watch?v=voFRslp8d60&t=17s',
        type: 'video/youtube'
    }]
}]);