VimeoPlaylist

Right before the world blew up, I had just begun a new gig at eBay Design. The Company was making moves to reimagine…. well, everything, completely rebuilding its position on Design across product and brand.

In support of those efforts, we wanted our office experience to align with the spirit of a design studio. Large screen displays were installed to serve up continuous reels of the dopest UI/Motion work for some daily inspiration. Of course, those vids had to come from somewhere, and be interfaced with something.

So, I made a little app that allowed anyone to quickly create a continuous playlist of Vimeo Vids. The core of that app is now a library on npm called VimeoPlaylist

VimeoPlaylist Features

Interfaces with Vimeo API
Builds playlist from array of Vimeo IDs or external JSON file
Provides optional UI for playlist items
Use JS templates for playlist items
Playlist navigation / controls with Key support
Optional continuous autoplay
Fullscreen API integration
Simple equalizer animation for active playlist item
Includes Vimeo API options like width, color, player controls, muted, title, etc.

Usage

Install from npm

npm i vimeoplaylist

Configure


import VimeoPlaylist form 'vimeoplaylist'

// Plugin Options (with internal data array)
// You could also just import a data object from a local json file
let options = {
  hasPlaylist: true,
  color: '#6c77f7',
  playlist: [
    { "id": "288588748" },
    { "id": "328536852" },
    { "id": "281449879" }
  ]
}

// Init on #js-player
let vids = new VimeoPlaylist('js-player', options).init()

Markup


<!-- Player -->
<div class="player">
  <div id="js-vp-player" class="player__vid"></div>
</div>

<!-- Playlist Nav -->
<nav class="playlist-nav">
  <button id="js-vp-prev" class="playlist-nav__prev">← Prev
  <button id="js-vp-next" class="playlist-nav__next">Next →
</nav>

<!-- Playlist -->
<div id="js-vp-playlist" class="playlist"></div>

Demo

Here’s a demo of a full playlist app. The demo can be found in the repo build as well.

Right Here

Repo

Here’s VimeoPlaylist on Github. See the readme for addition docs and the available options.