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:
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:
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!
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'
}]
}]);