tubby
— youtube playlist search
- ⚡ demo: chasemoskal.com/tubby
- web component to display a youtube playlist with a search bar
<tubby-youtube-explorer>
component on your webpage
using the -
first, you need access to the youtube api, and have your api key ready
- login with the google developer console, and get yourself a youtube api key
- you have to whitelist your domains with that api key
- you can have an api key that allows 'localhost' for testing
-
install tubby on your page
-
include the following snippet on your page
here's what's going on in this snippet
- import maps
- we provide an import map which locates
tubby
and its dependencies - of course, for the import map, we're using guy bedford's awesome polyfill: es-module-shims
- if you're from the future, you won't need the
-shim
's
- we provide an import map which locates
- register the web components
- we run
import "tubby/dist/register-all.js"
to register the<tubby-youtube-explorer>
component
- we run
- import maps
-
-
place the explorer html on your page
the youtube explorer fetches the specified youtube playlist, and displays video thumbnails in a grid formation, and optionally has a searchbar for filtering the video selection
youtube's api limits us to 50 videos at a time, so tubby does the hard work and requests every video sequentially, using back-to-back calls until it finds every video in the playlist
tubby has a simple dev-time caching mechanism i call "canning videos"
-
know how to configure the explorer for your use-case
all of tubby's configurable properties are optional, but you probably want to use a combination that loads some videos
-
⚓ string attributes
[api-key]
and[playlist-id]
tubby will fetch all the videos in that playlist -
⚓ string attributes
[api-key]
and[channel-id]
tubby will make an extra round trip to find the playlist called "uploads".
it is faster to provide the[playlist-id]
attribute instead -
⚓ string attribute
[canned]
url
tubby will fetch these cached videos.
if a playlist is also being fetched, the canned videos will provide a headstart that can prevent many round-trips and greatly improve the loading time.
more on canning videos later in the readme -
⚓ boolean attribute
[search]
tubby will display a search bar that the user can use to narrow the video listing -
⚓ number attribute
[max-description-length]
character number limit for video descriptions
optional javascript stuff
// we can create the explorer programmaticallyconst explorer = documentdocumentbody// we can set the attributes as propertiesexplorer"search" = trueexplorer"max-description-length" = 360explorer"api-key" = "AIzaSyDeHpB9W14feQs8myoWgFAZOCrDeKMLRwE"explorer"playlist-id" = "UUL_f53ZEJxp8TtlOkHwMV9Q"explorer"canned" = "dist-demo/canned-videos.json"// the explorer supports these callbacksexplorer consoleexplorer console// in addition to the two callbacks, there are matching custom eventsexplorerexplorer -
-
know how to style the explorer
-
canning videos with tubby's
tubby-download
commandline toolyou can give tubby a headstart (greatly reducing load times for large playlists), by using the
tubby-download
cli to generate a cache of "canned" videos in a json file, here's how-
npm install tubby
install tubby into your npm package -
tubby-download --api-key=AIzaSyDeHpB9W14feQs8myoWgFAZOCrDeKMLRwE --playlist-id=UUL_f53ZEJxp8TtlOkHwMV9Q > dist/canned-videos.json
call the tubby binary in a package.json script, supply the api-key and playlist-id, and specify where tubby should write the canned videos json file -
then you just provide the
[canned]
attribute like so:<tubby-youtube-explorer canned="dist/canned-videos.json">
-
tubby is open source and contributions are welcome!
please consider opening an issue or contributing pull requests :)