@eden-sonder/lite-vimeo NPM

\<lite-vimeo>

A web component that loads Vimeo embed iframes faster. Extends Alex Russell (@slightlyoff)'s and KJ Roelke (@choctaw-nation)'s work to allow poster images.

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 @eden-sonder/lite-vimeo

After install, import into your project:

import '@eden-sonder/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.6

Added fixes for unlisted videos and enabled used of unlisted video thumbnails

v1.2.4

Added button slot and variables

v1.2.3

Fix javascript error when using poster image

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.

8 months ago

8 months ago

1 year ago

1 year ago

1 year ago