PHPackages the-muda-organization/youtube-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/youtube-lazyload ActiveLibrary[Image & Media](/categories/media) the-muda-organization/youtube-lazyload ====================================== LazyLoad Embed Youtube Player - simple and lightweight plugin - pure JavaScript v4.0.1(5y ago)26465MITHTML Since Aug 9Pushed 4y ago3 watchersCompare [ Source](https://github.com/the-muda-organization/youtube-lazyload)[ Packagist](https://packagist.org/packages/the-muda-organization/youtube-lazyload)[ RSS](/packages/the-muda-organization-youtube-lazyload/feed)WikiDiscussions master Synced yesterday READMEChangelog (5)DependenciesVersions (6)Used By (0) Youtube LazyLoad ================ [](#youtube-lazyload) LazyLoad Embed Youtube Player - simple and lightweight plugin - pure JavaScript --- Status ------ [](#status) [![GitHub Version](https://camo.githubusercontent.com/87af2cf5c9e8f64f0cd1c20d6cca1a476ddf7ee74237adfa5ea5edb242e5b869/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f7468652d6d7564612d6f7267616e697a6174696f6e2f796f75747562652d6c617a796c6f61642e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/the-muda-organization/youtube-lazyload)[![License](https://camo.githubusercontent.com/14235d096fc5ab27288a8e02adedcb78adc785262fbd5a62073e2e209de03ad0/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f7468652d6d7564612d6f7267616e697a6174696f6e2f796f75747562652d6c617a796c6f61642e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/the-muda-organization/youtube-lazyload) [![Github Star](https://camo.githubusercontent.com/0b9b6b91e382785561d5a7511ccf6480b92cea2a747eb38f910930e8cc1e8214/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f7468652d6d7564612d6f7267616e697a6174696f6e2f796f75747562652d6c617a796c6f61642e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/the-muda-organization/youtube-lazyload)[![Github Fork](https://camo.githubusercontent.com/50b11ec979797b30e5dcd472968bec9c81be4d904b8cfabacf08361872e42d12/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f7468652d6d7564612d6f7267616e697a6174696f6e2f796f75747562652d6c617a796c6f61642e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/the-muda-organization/youtube-lazyload) [![CSS gzip size](https://camo.githubusercontent.com/78b4eb1ebc735a8552f3087e8d1cd3566b50f57db3993bbfdf2e1a2b1e19404e/68747470733a2f2f696d672e626164676573697a652e696f2f7468652d6d7564612d6f7267616e697a6174696f6e2f796f75747562652d6c617a796c6f61642f6d61737465722f646973742f6373732f79742d6c617a796c6f61642e6d696e2e6373733f636f6d7072657373696f6e3d677a6970266c6162656c3d4353532b677a69702b73697a65)](https://github.com/the-muda-organization/youtube-lazyload/blob/master/dist/css/yt-lazyload.min.css)[![JS gzip size](https://camo.githubusercontent.com/a14847020341ea80603221345be745f83d7c3fda02b1c880e20aa9cddeea522c/68747470733a2f2f696d672e626164676573697a652e696f2f7468652d6d7564612d6f7267616e697a6174696f6e2f796f75747562652d6c617a796c6f61642f6d61737465722f646973742f6a732f79742d6c617a796c6f61642e6d696e2e6a733f636f6d7072657373696f6e3d677a6970266c6162656c3d4a532b677a69702b73697a65)](https://github.com/the-muda-organization/youtube-lazyload/blob/master/dist/js/yt-lazyload.min.js) --- [View Preview](https://htmlpreview.github.io/?https://github.com/the-muda-organization/youtube-lazyload/blob/master/DEMO.html) ------------------------------------------------------------------------------------------------------------------------------ [](#view-preview) --- [![](https://github.com/the-muda-organization/youtube-lazyload/raw/master/PREVIEW.jpg?raw=true)](https://github.com/the-muda-organization/youtube-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/youtube-lazyload/archive/master.zip) - Clone the repo: `git clone https://github.com/the-muda-organization/youtube-lazyload.git` - Install with [Composer](https://getcomposer.org/): `composer require the-muda-organization/youtube-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) ``` yt-lazyload/ │ └─ dist/ │ ├── css/ │ ├── yt-lazyload.css │ └── yt-lazyload.min.css │ └── js/ ├── yt-lazyload.js └── yt-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/youtube-lazyload/issues/new). --- Installation ------------ [](#installation) 1. Download and copy files to your project 2. Open [yt-lazyload.js](https://github.com/the-muda-organization/youtube-lazyload/blob/master/dist/js/yt-lazyload.js) 3. Change settings: - `settings_thumb_base_url` to custom URL where your thumbnails are located. 4. Minify JavaScript and place it in [yt-lazyload.min.js](https://github.com/the-muda-organization/youtube-lazyload/blob/master/dist/js/yt-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 Youtube ID of your movie, example: `d4AmYBhGBfM` 2. Add the folowing code to embed a video: ``` ``` 3. Name your thumbnail using Youtube ID `d4AmYBhGBfM.jpg` - to use other file types change settings in JavaScript 4. Place your thumbnail in a folder set in JavaScript --- Features -------- [](#features) AttributeExplanation`class="yt-lazyload"`Main container. You can add additional style like `border`, `box-shadow` etc. or Bootstrap classes like `img-thumbnail`, `shadow` etc.`data-id="d4AmYBhGBfM"`Youtube 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 `d4AmYBhGBfM.jpg` and add custom suffix. For 3 thumbnails make `d4AmYBhGBfM--1.jpg`, `d4AmYBhGBfM--2.jpg` and `d4AmYBhGBfM--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"`Youtube logo color. You can customize it in CSS. 0 = none - logo will not be added by JavaScript, **1** = black, **2** = color-black, **3** = white, **4** = color-white (v4.0.0+).--- CSS Classes ----------- [](#css-classes) CSS classExplanation`.yt-lazyload`main container`.yt-lazyload::before`pseudo-element used to maintain container ratio and set `background-color``.yt-lazyload-wrap`container and its content added via javascript`.yt-lazyload-content`container for play button, logo and thumbnail as `background-image``.yt-lazyload-playbtn`play button (black)`.yt-lazyload-playbtn:hover`play button on hover (red)`.yt-lazyload-logo`Youtube logo`.yt-lazyload-logo:hover`Youtube logo on hover`.yt-lazyload[data-logo="X"] .yt-lazyload-logo`Youtube logo color based on data attribute`.yt-lazyload iframe`Youtube embeded iframe after click--- FAQ --- [](#faq) - **Can I use Youtube domain to get thumbnails?** - I am not sure if it will work in all cases, but you can try. You need to adjust JavaScript. - Change `settings_thumb_base_url = 'https://img.youtube.com/vi/';` - Change `this_content.style.setProperty('--yt-lazyload-img','url("' + settings_thumb_base_url + this_data_id + '/maxresdefault.jpg")');` - **Can I use *Youtube lazyload* with other frameworks like Bootstrap?** - Yes you can! There should be no conflict with other frameworks. - **Can I embed video players other than Youtube?** - Check out our sister project for Vimeo Player: - **Does it work on mobile devices?** - Yes and no. Lazyload works as expected but autoplay is disabled by YouTube on iOS and Android. More info: --- Versioning ---------- [](#versioning) Youtube 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/youtube-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/youtube-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/youtube-lazyload/blob/master/LICENSE). --- ### Health Score 31 — LowBetter than 68% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity19 Limited adoption so far Community11 Small or concentrated contributor base Maturity62 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 ~91 days Total 5 Last Release 2103d ago Major Versions v3.1.0 → v4.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 (182 commits)") --- Tags csshtmljavascriptjavascript-librarylazyloadvideoyoutubecssJSHTML5videoyoutubelazyloadlazyload-iframesmudayoutube-lazyload ### Embed Badge ![Health badge](/badges/the-muda-organization-youtube-lazyload/health.svg) ``` [![Health](https://phpackages.com/badges/the-muda-organization-youtube-lazyload/health.svg)](https://phpackages.com/packages/the-muda-organization-youtube-lazyload) ``` ### Alternatives [videojs/video.js An HTML5 video player. 39.6k24.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.2k1](/packages/happyworm-jplayer)[chojnicki/video-platforms-parser Easy to use SDK with grabber for multiple platforms at once like YouTube, Dailymotion, Facebook and more. 22226.4k](/packages/chojnicki-video-platforms-parser)[jonnitto/plyr Plyr.io for Neos.io 1236.2k2](/packages/jonnitto-plyr)[mediamonks/sonata-media-bundle A powerful, flexible and easy to use alternative for the existing Sonata Media Bundle 109.8k](/packages/mediamonks-sonata-media-bundle)[ideatic/tinyfier Complete suite for compressing, preprocessing, and optimizing HTML/Javascript/CSS and Images. 103.3k](/packages/ideatic-tinyfier) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)