包简介

A Magento 2 module that adds Paul Irish's Lite YouTube implementation support.

README 文档

README

YouTube videos, but performant. For Magento 2.

Overview

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.

Features

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

Installation

composer require magequest/magento2-module-lite-youtube
bin/magento module:enable MageQuest_LiteYouTube
bin/magento setup:upgrade

Usage

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/).

Additional Controls

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"

Compatibility

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

FAQs

Can I use the module if a site doesn't have/use Page Builder?

Yes, you can just add <lite-youtube> elements manually to CMS Blocks/Pages, attributes or anywhere else that supports HTML input.

Why does the minified CSS also contain the critical CSS?

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.

Contributing

Issues and pull requests welcomed.

magequest/magento2-module-lite-youtube 适用场景与选型建议

magequest/magento2-module-lite-youtube 是一款基于 JavaScript 开发的 Composer 扩展包，目前已累计 66.91k 次下载、GitHub Stars 达 40，最近一次更新时间为 2021 年 11 月 17 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 magequest/magento2-module-lite-youtube 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 magequest/magento2-module-lite-youtube 我们能提供哪些服务？

定制开发 / 二次开发

基于 magequest/magento2-module-lite-youtube 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

magequest/magento2-module-lite-youtube

包简介