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.
- 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
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';
- These have moved! See them at the Github Wiki page.
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 |
- Create a PR
- Tag @kjroelke as a reviewer.
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.