About This File
Модуль решает проблему долгой загрузки iframe с youtube и увеличивает page speed. Улучшает визуальную часть и дает возможность катомизации: отображение видео в popup, установка своих превью на видео, установка произвольной иконки "play",
Все вставки iframe с видео на вашем сайте перед выводом на страницу будут автоматически заменены на превью видео в виде изображений, которые подтягиваются с img.youtube.com/vi.
ЗАЧЕМ
Все знают, что iframe с видео очень сильно загружают страницу и уменьшают скорость загрузки сайта. Особенно это ощутимо (и даже визуально видно), если на странице несолько видео (каждый iframe это доп. запросы и ресурсы).
ССЫЛКИ НА ДЕМО
6 видео - разница 30-50%
Модуль выключен:
https://oc23.likedev.pro/6-video?disable-video-optim
и page speed 49/33 - https://developers.google.com/speed/pagespeed/insights/?hl=uk&url=https%3A%2F%2Foc23.likedev.pro%2F6-video%3Fdisable-video-optim&tab=mobile
Модуль включен
https://oc23.likedev.pro/6-video
и page speed 92/75 - https://developers.google.com/speed/pagespeed/insights/?hl=uk&url=https%3A%2F%2Foc23.likedev.pro%2F6-video
Страница та же, только в первом случае добавлен параметр ?disable-video-optim , чтобы модуль не срабатывал и можно было увидеть разницу.
1 видео - разница 10-30%
И даже с 1 видео показатель достаточно проседает, особенно для мобильных устройств
Модуль выключен:
https://oc23.likedev.pro/1-video?disable-video-optim
и page speed 88/51 - https://developers.google.com/speed/pagespeed/insights/?hl=uk&url=https%3A%2F%2Foc23.likedev.pro%2F1-video%3Fdisable-video-optim&tab=desktop
Модуль вкючен:
https://oc23.likedev.pro/1-video
и page speed 96/80 - https://developers.google.com/speed/pagespeed/insights/?hl=uk&url=https%3A%2F%2Foc23.likedev.pro%2F1-video&tab=mobile
Админка https://oc23.likedev.pro/admin/ логин/пароль: demo/demo
Кроме того визуально намного симпатичнее превью с иконкой, чем ютубовский iframe, да и возможность открытия видео в popup тоже очень полезна. + мы можем через css стили кастомизировать превью как нам угодно.
ВОЗМОЖНОСТИ
- видео по клику на превью
- всплывающеее окно с видео по клику на превью
- произвольные изображение для превью
- выбор размера превью
- установка своей иконки на кнопку 'play' (font awesome, html) и ее стилизация через css
- возможно указать пути для исключения работы модуля
- поля для камтомных стилей и js
ОСОБЕННОСТИ
- будет работать на всех шаблонах
- максимально легкий модуль без зависимостей (всего пару строк css и ванильного js, никаких библиотек)
- будет работать даже без бутстрапа и jquery
- открытый код
ПРИМЕНЕНИЕ
- увеличение скорости загрузки и в результате лучший показатель page speed
- кастомизация внешнего вида видео превью
- вывод видео в popup позволить показывать ваши iframe даже на ограниченном пространстве
- подмена превью на свои позволит поставить подходящие вам изображения для видео и украсить сайт
УСТАНОВКА
видео установки
(только тут фикс не нужен, остальное - так же)
Через установщик в админке загружаете архив модуля ocmod для своей версии опенкарт.
Для версий 2.x убедитесь, что у вас уже установлен модификатор localcopy.ocmod, если его нет - установите.
ЛИЦЕНЗИЯ
Лицензия выдается на один домен. Также при необходимости на тестовый поддомен. Для получения ключа обращайтесь в лс или на почту [email protected], сразу указывайте данные о покупке: номер заказа и домен
Приветствую дельные предложения по развитию и расширению модуля.
Также смотрите модули:
Accordion & Tabs & Steps, Faq & HowTo Microdata, any place & content
