PHPackages the-muda-organization/vimeo-lazyload - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Image & Media](/categories/media) 4. / 5. the-muda-organization/vimeo-lazyload ActiveLibrary[Image & Media](/categories/media) the-muda-organization/vimeo-lazyload ==================================== LazyLoad Embed Vimeo Player - simple and lightweight plugin - pure JavaScript v2.1.0(5y ago)253909[4 issues](https://github.com/the-muda-organization/vimeo-lazyload/issues)MITHTML Since Aug 9Pushed 4y ago1 watchersCompare [ Source](https://github.com/the-muda-organization/vimeo-lazyload)[ Packagist](https://packagist.org/packages/the-muda-organization/vimeo-lazyload)[ RSS](/packages/the-muda-organization-vimeo-lazyload/feed)WikiDiscussions master Synced 2w ago READMEChangelog (6)DependenciesVersions (7)Used By (0) Vimeo LazyLoad ============== [](#vimeo-lazyload) LazyLoad Embed Vimeo Player - simple and lightweight plugin - pure JavaScript --- Status ------ [](#status) [![GitHub Version](https://camo.githubusercontent.com/bd2d052f8664b6bd59a10a659519b01f8031cea541228310627ca0aa4c152506/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f7468652d6d7564612d6f7267616e697a6174696f6e2f76696d656f2d6c617a796c6f61642e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/the-muda-organization/vimeo-lazyload)[![License](https://camo.githubusercontent.com/fc6097c98bf67b0169a8986e9c778fefcaa15d1177a46a7fc8308bf499616fe7/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f7468652d6d7564612d6f7267616e697a6174696f6e2f76696d656f2d6c617a796c6f61642e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/the-muda-organization/vimeo-lazyload) [![Github Star](https://camo.githubusercontent.com/dc030e9452a254c5caf90ef1af82dceeee1c59e4463b69a9ecc9bee3c2ee39bb/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f7468652d6d7564612d6f7267616e697a6174696f6e2f76696d656f2d6c617a796c6f61642e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/the-muda-organization/vimeo-lazyload)[![Github Fork](https://camo.githubusercontent.com/20ba0bdc78f1c437402a7bbc2d4181d702738233444a8a2657d706b8649ae761/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f7468652d6d7564612d6f7267616e697a6174696f6e2f76696d656f2d6c617a796c6f61642e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/the-muda-organization/vimeo-lazyload) [![CSS gzip size](https://camo.githubusercontent.com/956964340314d99bc39268e033e511a090db05a4e1c13598366b836570a9d0e1/68747470733a2f2f696d672e626164676573697a652e696f2f7468652d6d7564612d6f7267616e697a6174696f6e2f76696d656f2d6c617a796c6f61642f6d61737465722f646973742f6373732f76692d6c617a796c6f61642e6d696e2e6373733f636f6d7072657373696f6e3d677a6970266c6162656c3d4353532b677a69702b73697a65)](https://github.com/the-muda-organization/vimeo-lazyload/blob/master/dist/css/vi-lazyload.min.css)[![JS gzip size](https://camo.githubusercontent.com/44545ddd8d4c18f98a154e722138d59714fa61759c9f3e55af9c99ea4b7ea010/68747470733a2f2f696d672e626164676573697a652e696f2f7468652d6d7564612d6f7267616e697a6174696f6e2f76696d656f2d6c617a796c6f61642f6d61737465722f646973742f6a732f76692d6c617a796c6f61642e6d696e2e6a733f636f6d7072657373696f6e3d677a6970266c6162656c3d4a532b677a69702b73697a65)](https://github.com/the-muda-organization/vimeo-lazyload/blob/master/dist/js/vi-lazyload.min.js) --- [View Preview](https://htmlpreview.github.io/?https://github.com/the-muda-organization/vimeo-lazyload/blob/master/DEMO.html) ---------------------------------------------------------------------------------------------------------------------------- [](#view-preview) --- [![](https://github.com/the-muda-organization/vimeo-lazyload/raw/master/PREVIEW.jpg?raw=true)](https://github.com/the-muda-organization/vimeo-lazyload/blob/master/PREVIEW.jpg?raw=true) --- Table of contents ----------------- [](#table-of-contents) - [Status](#status) - [Quick Start](#quick-start) - [What's included](#whats-included) - [Bugs and feature requests](#bugs-and-feature-requests) - [Installation](#installation) - [How to Use](#how-to-use) - [Features](#features) - [CSS Classes](#css-classes) - [FAQ](#faq) - [Versioning](#versioning) - [Changelog](#changelog) - [Team](#team) - [Code of Conduct](#code-of-conduct) - [Copyright and License](#copyright-and-license) --- Quick Start ----------- [](#quick-start) Several options are available: - [Download the latest release.](https://github.com/the-muda-organization/vimeo-lazyload/archive/master.zip) - Clone the repo: `git clone https://github.com/the-muda-organization/vimeo-lazyload.git` - Install with [Composer](https://getcomposer.org/): `composer require the-muda-organization/vimeo-lazyload` --- What's included --------------- [](#whats-included) Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this: There are no dependencies. No jQuery or other plugins required. See below for [Installation Guide](#installation) and [How to Use](#how-to-use) ``` vi-lazyload/ │ └─ dist/ │ ├── css/ │ ├── vi-lazyload.css │ └── vi-lazyload.min.css │ └── js/ ├── vi-lazyload.js └── vi-lazyload.min.js ``` --- Bugs and feature requests ------------------------- [](#bugs-and-feature-requests) Have a bug or a feature request? Before opening a new issue search for existing and closed issues. If your problem or idea is not addressed yet, [open a new issue](https://github.com/the-muda-organization/vimeo-lazyload/issues/new). --- Installation ------------ [](#installation) 1. Download and copy files to your project 2. Open [vi-lazyload.js](https://github.com/the-muda-organization/vimeo-lazyload/blob/master/dist/js/vi-lazyload.js) 3. Change settings: - `settings_thumb_base_url` to custom URL where your thumbnails are located. 4. Minify JavaScript and place it in [vi-lazyload.min.js](https://github.com/the-muda-organization/vimeo-lazyload/blob/master/dist/js/vi-lazyload.min.js). 5. Add CSS and JavaScript to your project: ``` ``` **NOTE: Because of small file sizes I recommend adding CSS & JS inline!** ``` ... ... ``` --- How to Use ---------- [](#how-to-use) 1. Get Vimeo ID of your movie, example: `272532681` 2. Add the folowing code to embed a video: ``` ``` 3. Name your thumbnail using Vimeo ID `272532681.jpg` - to use other file types change settings in JavaScript 4. Place your thumbnail in a folder set in JavaScript --- Features -------- [](#features) AttributeExplanation`class="vi-lazyload"`Main container. You can add additional style like `border`, `box-shadow` etc. or Bootstrap classes like `img-thumbnail`, `shadow` etc.`data-id="272532681"`Vimeo video ID`data-thumb=""`If you need to add more thumbnails you can choose which one is displayed. It is usefull for quality specific thumbs (SD, 720p, 1080p) or in case of multiple thumbs random one can be selected. Name your files `272532681.jpg` and add custom suffix. For 3 thumbnails make `272532681--1.jpg`, `272532681--2.jpg` and `272532681--3.jpg`. To show thumbnail 2 use `data-thumb="--2"` and so on. You can randomize numbers using ``. **Leave empty if you have only 1 thumbnail.**`data-logo="3"`Vimeo logo color. You can customize it in CSS. 0 = none - logo will not be added by JavaScript, **1** = blue, **2** = dark, **3** = white.--- CSS Classes ----------- [](#css-classes) CSS classExplanation`.vi-lazyload`main container`.vi-lazyload::before`pseudo-element used to maintain container ratio and set `background-color``.vi-lazyload-wrap`container and its content added via javascript`.vi-lazyload-content`container for play button, logo and thumbnail as `background-image``.vi-lazyload-playbtn`play button (black)`.vi-lazyload-playbtn:hover`play button on hover (blue)`.vi-lazyload-logo`Vimeo logo`.vi-lazyload-logo:hover`Vimeo logo on hover`.vi-lazyload[data-logo="X"] .vi-lazyload-logo`Vimeo logo color based on data attribute`.vi-lazyload iframe`Vimeo embeded iframe after click--- FAQ --- [](#faq) - **Can I use Vimeo domain to get thumbnails?** - Not as easy as on Youtube. Vimeo doesn't use video id for its thumbnails. You need to use Vimeo API to get URL of thumbnail. - **Can I use *Vimeo lazyload* with other frameworks like Bootstrap?** - Yes you can! There should be no conflict with other frameworks. - **Can I embed video players other than Vimeo?** - Check out our sister project for Youtube Player: --- Versioning ---------- [](#versioning) Vimeo LazyLoad will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format: `..` --- Changelog --------- [](#changelog) For last releases see detailed [CHANGELOG](https://github.com/the-muda-organization/vimeo-lazyload/blob/master/CHANGELOG.md). --- Team ---- [](#team) - [Jakub Muda](https://github.com/jakubmuda) --- Code of conduct --------------- [](#code-of-conduct) We will behave ourselves if you behave yourselves. For more details see our [CODE\_OF\_CONDUCT.md](https://github.com/the-muda-organization/vimeo-lazyload/blob/master/CODE_OF_CONDUCT.md). --- Copyright and license --------------------- [](#copyright-and-license) Code and documentation copyright 2017-2020 [The MUDA Organization](https://muda.pl). Code released under the [MIT License](https://github.com/the-muda-organization/vimeo-lazyload/blob/master/LICENSE). --- ### Health Score 32 — LowBetter than 69% of packages Maintenance17 Infrequent updates — may be unmaintained Popularity24 Limited adoption so far Community11 Small or concentrated contributor base Maturity63 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~118 days Recently: every ~133 days Total 6 Last Release 1925d ago Major Versions v1.0.3 → v2.0.02020-06-20 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/40349972?v=4)[Jakub Muda](/maintainers/jakubmuda)[@jakubmuda](https://github.com/jakubmuda) --- Top Contributors [![jakubmuda](https://avatars.githubusercontent.com/u/40349972?v=4)](https://github.com/jakubmuda "jakubmuda (116 commits)") --- Tags csshtmljavascriptjavascript-librarylazyloadvideovimeocssJSHTML5videovimeolazyloadlazyload-iframesmudavimeo-lazyload ### Embed Badge ![Health badge](/badges/the-muda-organization-vimeo-lazyload/health.svg) ``` [![Health](https://phpackages.com/badges/the-muda-organization-vimeo-lazyload/health.svg)](https://phpackages.com/packages/the-muda-organization-vimeo-lazyload) ``` ### Alternatives [videojs/video.js An HTML5 video player. 39.8k24.3k](/packages/videojs-videojs)[happyworm/jplayer jPlayer allows you to create a media player with a consistent interface and experience across all browsers. 4.6k114.5k1](/packages/happyworm-jplayer)[vimeo/vimeo-api Official PHP library for the Vimeo API. 4537.4M38](/packages/vimeo-vimeo-api)[vimeo/laravel A Vimeo bridge for Laravel 4171.6M4](/packages/vimeo-laravel)[jonnitto/plyr Plyr.io for Neos.io 1136.5k2](/packages/jonnitto-plyr)[ideatic/tinyfier Complete suite for compressing, preprocessing, and optimizing HTML/Javascript/CSS and Images. 113.4k](/packages/ideatic-tinyfier) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)