YouTube lazy load & popup - оптимизация и кастомизация iframe

YouTube lazy load & popup - оптимизация и кастомизация iframe

Модуль решает проблему долгой загрузки iframe с youtube и увеличивает page speed. Улучшает визуальную часть и дает возможность катомизации: отображение видео в popup, установка своих превью на видео, установка произвольной иконки "play",

Совместим с OpenCart: 2.0.x.x, 2.1.x.x, 2.2.x.x, 2.3.x.x, 3.0.x.x, 3.1.x.x,
Совместим с OcStore: 2.1.x.x, 2.3.x.x, 3.0.x.x,
Цена
500р.
Загружен: 17.11.2020
seriusis Украина, Киев портфолио
Товаров: Рейтинг: Продаж:
Название файла Имя файла Дата Действие
youtube_lazy_load_and_popup_oc_2.0-2.2.ocmod.zip opencart_file_2822.zip 2020-11-17 16:11:58 Платный файл
youtube_lazy_load_and_popup_oc_2.3.ocmod.zip opencart_file_10482.zip 2020-11-17 16:11:08 Платный файл
youtube_lazy_load_and_popup_oc_3.ocmod.zip opencart_file_7276.zip 2020-11-17 16:11:17 Платный файл
* Возможность скачивания появится после покупки

Модуль решает проблему долгой загрузки iframe с youtube и увеличивает page speed. Улучшает визуальную часть и дает возможность катомизации: отображение видео в popup, установка своих превью на видео, установка произвольной иконки "play",

 

Все вставки iframe с видео на вашем сайте перед выводом на страницу будут автоматически заменены на превью видео в виде изображений, которые подтягиваются с img.youtube.com/vi.

 

ЗАЧЕМ

Все знают, что iframe с видео очень сильно загружают страницу и уменьшают скорость загрузки сайта. Особенно это ощутимо (и даже визуально видно), если на странице несолько видео (каждый iframe это доп. запросы и ресурсы).

 

Для сравнения, я замерял демо сайт, где на странице с 6 видео page speed показывает пк-моб 49/33 без модуля. После включения модуля результат вернулся в зеленую зону и показывает 92/75.

 

Модуль выключен:

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 видео показатель достаточно проседает, особенно для мобильных устройств

Модуль выключен:

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

 

Кроме того визуально намного симпатичнее превью с иконкой, чем ютубовский iframe, да и возможность открытия видео в popup тоже очень полезна. + мы можем через css стили кастомизировать превью как нам угодно.

 

ВОЗМОЖНОСТИ

  • видео по клику на превью
  • всплывающеее окно с видео по клику на превью
  • произвольные изображение для превью
  • выбор размера превью
  • установка своей иконки на кнопку 'play' (font awesome, html) и ее стилизация через css
  • возможно указать пути для исключения работы модуля
  • поля для камтомных стилей и js

 

ДЕМО

Админка https://oc23.likedev.pro/admin/   логин/пароль: demo/demo

https://oc23.likedev.pro/6-video

 

ОСОБЕННОСТИ

  • будет работать на всех шаблонах
  • максимально легкий модуль без зависимостей (всего пару строк css и ванильного js, никаких библиотек)
  • будет работать даже без бутстрапа и jquery
  • открытый код

 

ПРИМЕНЕНИЕ

  • увеличение скорости загрузки и в результате лучший показатель page speed
  • кастомизация внешнего вида видео превью
  • вывод видео в popup позволить показывать ваши iframe даже на ограниченном пространстве
  • подмена превью на свои позволит поставить подходящие вам изображения для видео и украсить сайт

 

УСТАНОВКА

Через установщик в админке загружаете архив модуля ocmod для своей версии опенкарт. 

Для версий 2.x убедитесь, что у вас уже установлен модификатор localcopy.ocmod, если его нет - установите.

Видео установки (только тут фикс для oc3 не нужен)

 

ЛИЦЕНЗИЯ 

Лицензия выдается на один домен. Также при необходимости на тестовый поддомен. Для получения ключа обращайтесь в лс или на почту seriusisu@gmail.com, сразу указывайте данные о покупке: номер заказа и домен

Приветствую дельные предложения по развитию и расширению модуля.

YouTube lazy load & popup - оптимизация и кастомизация iframe YouTube lazy load & popup - оптимизация и кастомизация iframe YouTube lazy load & popup - оптимизация и кастомизация iframe YouTube lazy load & popup - оптимизация и кастомизация iframe

Дополнительные опции товара

* Адрес сайта:
* Тестовый домен:
Установка:

Написать отзыв

* Выполните Вход в свой аккаунт, для получения возможности оставить отзыв о товаре.

Если комментарии не отобразились по какой то причине, то вы можете прочитаь их на отдельной технической странице комментариев

После просмотра, пожалуйста сообщите нам о возможной проблеме через форму обратной связи.

Оставить комментарий



Примечание: HTML разметка не поддерживается! Используйте обычный текст.

Введите код, указанный на картинке: