Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/slightlyoff/lite-vimeo
Vimeo version of Justin's version of Paul's lighter YT embed
https://github.com/slightlyoff/lite-vimeo
Last synced: 3 months ago
JSON representation
Vimeo version of Justin's version of Paul's lighter YT embed
- Host: GitHub
- URL: https://github.com/slightlyoff/lite-vimeo
- Owner: slightlyoff
- License: mit
- Fork: true (justinribeiro/lite-youtube)
- Created: 2020-05-13T21:15:34.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-15T16:29:29.000Z (6 months ago)
- Last Synced: 2024-07-31T02:34:13.838Z (4 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@slightlyoff/lite-vimeo
- Size: 199 KB
- Stars: 78
- Watchers: 3
- Forks: 26
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/%40slightlyoff%2Flite-vimeo)
# \
> A web component that displays Vimeo embeds faster. Based on Justin Ribeiro's excellent [\](https://github.com/justinribeiro/lite-youtube), which, in turn, is a Shadow DOM version of Paul's [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed).
This is basically a rebadge of Justin's component, but for Vimeo.
## Features
- No dependencies; it's just a vanilla web component.
- It's fast yo.
- 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
## Install
This web component is built with ES modules in mind and is
available on NPM:
Install code-block:
```sh
npm i @slightlyoff/lite-vimeo
# or
yarn add @slightlyoff/lite-vimeo
```
After install, import into your project:
```js
import '@slightlyoff/lite-vimeo';
```
## Install with CDN
If you want the paste-and-go version, you can simply load it via CDN:
```html
```
## Basic Usage
```html
<lite-vimeo videoid="364402896"></lite-vimeo>
```
## Add Video Title
```html
<lite-vimeo
videoid="364402896"
videotitle="This is a video title"
></lite-vimeo>
```
## Change "Play" for Locale</h3>
```html
<lite-vimeo
videoid="364402896"
videoplay="Mirar"
videotitle="Mis hijos se burlan de mi español"
></lite-vimeo>
```
## Style It
Height and Width are responsive in the component.
```html
<style>
.styleIt {
width: 400px;
margin: auto;
}
</style>
<div class="styleIt">
<lite-vimeo videoid="364402896"></lite-vimeo>
</div>
```
## Set a video start time
```html
<!-- Start at 5 min, 30 seconds -->
<lite-vimeo videoid="364402896" start="5m30s"></lite-vimeo>
```
## AutoLoad with IntersectionObserver
Uses Intersection Observer if available to automatically load the Vimeo iframe when scrolled into view.
```html
<lite-vimeo videoid="364402896" autoload></lite-vimeo>
```
## Auto Play (requires AutoLoad)
```html
<lite-vimeo videoid="364402896" autoload autoplay></lite-vimeo>
```
## Attributes
The web component allows certain attributes to be give a little additional
flexibility.
| Name | Description | Default |
| ------------ | ---------------------------------------------------------------- | ------- |
| `videoid` | The Vimeo videoid | `` |
| `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` |