@choctawnationofoklahoma/lite-vimeo
v1.2.2
Published
A web component that loads Vimeo embed iframes faster. Extends Alex Russell (@slightlyoff)'s version to allow unlisted videos.
Downloads
314
Readme
<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
|
| enabletracking
| An opt-in attribute flag to allow Vimeo's tracking |
| loop
| If exists, loop the video |
Changelog
v1.2.0
- Fix a styling issue and autoplay issue
- Refactor into multiple classes for clearer split of responsibilities
v1.1.1
- Handle the Shadow Root & web-component lifecycle methods better
- Bump packages
v1.1.0
- Init Changelog
- Add new param:
loop
to enable video looping (was previously enabled by default). - Updated
videoStartAt
to only render param if exists - Updated autoplay param to always be set to true, but if user adds
autoplay
to the web component, it controls whether the video auto plays and runs muted.
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.