1.0.4 • Published 4 days ago
@choctawnationofoklahoma/lite-vimeo v1.0.4
\<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
videotitleattribute - It's locale ready; you can set the
videoplayto have a properly locale based label - Set the
startattribute to start at a particular place in a video - You can set
autoloadto 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-vimeoAfter 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
- Create a PR
- 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.