PHPackages                             yjmorales/img\_video\_lazy\_loader - 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. [Utility & Helpers](/categories/utility)
4. /
5. yjmorales/img\_video\_lazy\_loader

ActiveLibrary[Utility & Helpers](/categories/utility)

yjmorales/img\_video\_lazy\_loader
==================================

This project lazy loads the videos and images present in html to speed up the loading of web pages. It also parses an html containing search for images or YouTube videos. If you find them, modify those tags and replace them with quick-to-load elements.

016PHP

Since Jan 24Pushed 2y ago1 watchersCompare

[ Source](https://github.com/yjmorales/img_video_lazy_loader)[ Packagist](https://packagist.org/packages/yjmorales/img_video_lazy_loader)[ RSS](/packages/yjmorales-img-video-lazy-loader/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)DependenciesVersions (1)Used By (0)

Image and Youtube Video lazy loader
===================================

[](#image-and-youtube-video-lazy-loader)

This project lazy loads the videos and images present in html to speed up the loading of web pages. It also parses an html containing search for images or YouTube videos. If you find them, modify those tags and replace them with quick-to-load elements.

Installation
------------

[](#installation)

> composer require yjmorales/img\_video\_lazy\_loader

How to lazy load a YouTube video.
---------------------------------

[](#how-to-lazy-load-a-youtube-video)

There are two scenarios:

- To lazy-load the video directly on the web page.
- The html content either is part of a variable or db record, and before it's presented or rendered it must be mutated in order to lazy load the video.

### Scenario 1: Lazy-loading the video directly on the web page.

[](#scenario-1-lazy-loading-the-video-directly-on-the-web-page)

1. Include the following files:

    - `src/css/img_video_lazy_loader.css`
    - `src/js/img_video_lazy_loader.js`
2. Instantiate the function class **ImgVideoLazyLoader**:

    - `(new ImgVideoLazyLoader())`
3. Add the YouTube video to the html content:

```

```

### Scenario 2: Lazy Loading YouTube videos on a html content saved in a variable or db record.

[](#scenario-2-lazy-loading-youtube-videos-on-a-html-content-saved-in-a-variable-or-db-record)

1. First mutate the html content.

```