GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → luwes → lite-vimeo-embed

luwes / lite-vimeo-embed

Licence: other
🎥 A faster Vimeo embed.

Labels

vimeoperformancecustom-elements

Projects that are alternatives of or similar to lite-vimeo-embed

CalDOM
An agnostic, reactive & minimalist (3kb) JavaScript UI library with direct access to native DOM.
Stars: ✭ 176 (+64.49%)
Mutual labels:  custom-elements
remote-input-element
An input element that sends its value to a server endpoint and renders the response body.
Stars: ✭ 72 (-32.71%)
Mutual labels:  custom-elements
symbiote.js
Simple, light and very powerful library to create embedded components for any purpose, with a data flow management included.
Stars: ✭ 40 (-62.62%)
Mutual labels:  custom-elements
chat-ui
💬 rich message handling chat interface for bot projects
Stars: ✭ 19 (-82.24%)
Mutual labels:  custom-elements
material-webcomponents
Material Design implemented in Web Components (Custom Elements v1)
Stars: ✭ 110 (+2.8%)
Mutual labels:  custom-elements
vlitejs
🦋 vLitejs is a fast and lightweight Javascript library for customizing video and audio player in Javascript with a minimalist theme (HTML5, Youtube, Vimeo, Dailymotion)
Stars: ✭ 162 (+51.4%)
Mutual labels:  vimeo
api-viewer-element
API documentation and live playground for Web Components. Based on Custom Elements Manifest format
Stars: ✭ 222 (+107.48%)
Mutual labels:  custom-elements
crab
JavaScript library for building user interfaces with Custom Elements, Shadow DOM and React like API
Stars: ✭ 22 (-79.44%)
Mutual labels:  custom-elements
paper-chip
A chip web component made with Polymer 2 following Material Design guidelines
Stars: ✭ 30 (-71.96%)
Mutual labels:  custom-elements
notification-service-js
🚦Notification Service based on Custom Elements
Stars: ✭ 16 (-85.05%)
Mutual labels:  custom-elements
smart-webcomponents-community
Material & Bootstrap Web Components built with Smart
Stars: ✭ 30 (-71.96%)
Mutual labels:  custom-elements
electron-video-downloader
A minimal Electron application to download videos, eg from youtube, and associated captions (optional). Uses youtube-dl under the hood.
Stars: ✭ 22 (-79.44%)
Mutual labels:  vimeo
esl
Lightweight and flexible UI component library based on web components technology for creating basic UX modules
Stars: ✭ 53 (-50.47%)
Mutual labels:  custom-elements
web-controls-library
A library of reusable custom elements for GeneXus web applications
Stars: ✭ 14 (-86.92%)
Mutual labels:  custom-elements
statamic-video-embed
A field type for embedding YouTube and Vimeo Videos
Stars: ✭ 16 (-85.05%)
Mutual labels:  vimeo
svelte-webcomponent-boilerplate
🏗 Create your HTML5 Web Component with Svelte. Made your web components with this user-friendly boilerplate
Stars: ✭ 58 (-45.79%)
Mutual labels:  custom-elements
iogui
Experimental JavaScript Framework
Stars: ✭ 43 (-59.81%)
Mutual labels:  custom-elements
modulor-html
Missing template engine for Web Components
Stars: ✭ 36 (-66.36%)
Mutual labels:  custom-elements
mce
Material-Designed Custom Elements
Stars: ✭ 19 (-82.24%)
Mutual labels:  custom-elements
grid-container
A grid for the future, CSS Grid Layout + Web Components (Custom Elements v1 + Shadow DOM v1)
Stars: ✭ 51 (-52.34%)
Mutual labels:  custom-elements
View All Similar Projects ➔

🙋 Using YouTube? Check out the original lite-youtube-embed.
🦾 Need more power? Check out playerx.

Lite Vimeo Embed

Renders faster than a sneeze.

Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224X faster.

Comparison

Normal <iframe> Vimeo embed lite-vimeo
Screen Shot 2019-11-03 at 5 23 50 PM Screen Shot 2019-11-03 at 5 21 05 PM Screen Shot 2019-11-03 at 5 19 35 PM Screen Shot 2019-11-03 at 5 23 27 PM Screen Shot 2019-11-03 at 5 20 55 PM Screen Shot 2019-11-03 at 5 20 16 PM

Basic usage

To use the custom embed you will need to:

  1. Include the script
  2. Use the element lite-vimeo markup and scripting
  3. Be happy that you're providing a better user experience to your visitors
<!-- Include the custom element script -->
<script src="http://unpkg.com/lite-vimeo-embed"></script>

<!-- Use the element. You may define uses before the scripts are parsed and executed. -->
<lite-vimeo videoid="357274789"></lite-vimeo>

Pro-usage

Use this as your HTML, load the script asynchronously, and let the JS progressively enhance it.

<lite-vimeo videoid="357274789" style="background-image: url('https://i.vimeocdn.com/video/810965406.webp?mw=1600&mh=900&q=70');">
	<div class="ltv-playbtn"></div>
</lite-vimeo>

More coming soon.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].