@choctawnationofoklahoma/lite-vimeo

<lite-vimeo>

A web component that displays Vimeo embeds faster. Based on @slightlyoff's work (among others), this extends the component to allow for custom image placeholders and unlisted videos.

Features

• No dependencies; it's just vanilla JS & a web component.
• It's fast 🏎️.
• It's Shadow Dom encapsulated!
• It's responsive 16:9
• It's accessible via keyboard and will set ARIA via the videotitle attribute
• It's locale ready; you can set the videoplay to have a properly locale based label
• Set the start attribute to start at a particular place in a video
• You can set autoload to use Intersection Observer to load the iframe when scrolled into view.
• Loads placeholder image as WebP with a Jpeg fallback
• Allows custom placeholder images
• Allows unlisted vimeo videos

Install

This web component is built with ES modules in mind and is available on NPM:

Install code-block:

npm i @choctawnationofoklahoma/lite-vimeo

After install, import into your project:

import '@choctawnationofoklahoma/lite-vimeo';

Basic Examples

• These have moved! See them at the Github Wiki page.

Attributes

The web component allows certain attributes to be give a little additional flexibility.

Name	Description	Default
videoid*	The Vimeo videoid (required)	``
videotitle	The title of the video	Video
videoplay	The title of the play button (for translation)	Play
autoload	Use Intersection Observer to load iframe when scrolled into view	false
autoplay	Video attempts to play automatically if auto-load set and browser allows it	false
start	Set the point at which the video should start, in seconds	0
unlisted	An attribute flag whose existence declares the videoid as unlisted
customPlaceholder	A valid url to load a custom placeholder image	string

---

Contributing

1. Create a PR
2. Tag @kjroelke as a reviewer.

---

Misc.

I also wrote a script to track videos views with Google Tag Manager. Since it's in the ShadowDOM, it gets a bit tricky, so here's a link to that repo.