YouTube videos, but performant. For Magento 2.
A Magento 2 module that adds performant YouTube embeds (with no user experience impact) based on Paul Irish's Lite YouTube implementation.
Includes further enhancements, such as image quality (size), WebP support, custom placeholder images, image lazy loading and a Page Builder content type.
- Allows use of
<lite-youtube>
element anywhere on the storefront - Can be used in CMS Pages/Blocks, attribute output or even code
- Adds a Page Builder content type for easier use (with admin preview)
- Choose default placeholder image quality (size)
- WebP image format used where browsers support
- Optionally add custom placeholder image
- Choose whether placeholder images are lazy loaded
- Critical CSS added to
<head>
to negate CLS (Cumulative Layout Shift) - Remaining CSS/JS only loaded when
<lite-youtube>
elements exist on the page
composer require magequest/magento2-module-lite-youtube
bin/magento module:enable MageQuest_LiteYouTube
bin/magento setup:upgrade
See Paul Irish's Lite YouTube README for basic usage.
Note: the progressive enhancement option is not recommended with this implementation as both button and imagery can be lazy loaded and by doing so helps reduce CLS (https://web.dev/cls/).
The following additions are implemented via this fork of Lite YouTube:
- Default placeholder image quality:
quality="hqdefault|sddefault|maxresdefault"
hqdefault
is default- See overview of sizes and availability here
- Custom placeholder image:
image="<image-url>"
- Disable placeholder image lazy load:
lazy="false"
- Magento Open Source / Commerce Edition 2.4.x
- Supports Magento 2 Full Page Cache (including Varnish)
- Supports both Luma/Blank and Hyvä Themes based storefronts
- Does not support Internet Explorer
Yes, you can just add <lite-youtube>
elements manually to CMS Blocks/Pages, attributes or anywhere else that supports HTML input.
Because the CSS is required on both the admin panel and the storefront, I ran into issues with the critical CSS not being recognised in the admin panel and didn't want to maintain 2 separate CSS files for the sake of 10 lines of CSS.
Issues and pull requests welcomed.