Перейти к публикации
  • разработка интернет магазинов на opencart
  • доработка интернет магазинов на opencart

[Поддержка] YouTube lazy load & popup - оптимизация и кастомизация iframe, увеличение page speed


Seriusis
 Поделиться

Рекомендованные сообщения

YouTube lazy load & popup - оптимизация и кастомизация iframe, увеличение page speed


YouTube lazy load & popup - оптимизация и кастомизация iframe, увеличение page speed


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

Для РФ и РБ модуль не продается  и поддержка не предоставляется.

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

Внимание! Модулю без разницы, каким образом у вас реализован вывод видео (через доп поля, описание товара, доп вкладки или прямо в файле), он собирает конечный код iframe и заменяет на свой именно при рендеринге страницы системой opencart. Т.е весь ваш фунционал остается на месте и видео добавляете на сайт как и раньше. В любой момент модуль можно отключить.

 

ЗАЧЕМ

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

 

 

spacer.png

 

ССЫЛКИ НА ДЕМО

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/51https://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/80https://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 даже на ограниченном пространстве
  • подмена превью на свои позволит поставить подходящие вам изображения для видео и украсить сайт

 

Если у вас уже есть оптимизация видео от шаблона или каким то модулем - этот модуль вам не нужен или нужен не на всех страницах

Если у вас какие-то нестандартные коды iframe - модуль может работать некорректно и нужна адаптация.

 

Чтобы не было черных полос, можно поставить заставки к видео на канале youtube или загрузить свои в папку модуля. 

 

ВАЖНО!  Предпочтительно использовать режим POPUP для лучшей совместимости с шаблонами, разметкой и адаптивности видео.

 

УСТАНОВКА

 

видео установки

(только тут фикс не нужен, остальное - так же)

Спойлер

 

 

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

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

 

PS. Для редактора CKeditor при вставке в режиме кода некоторых тегов, в т.ч и iframe, редактор их чистит.  В таком случае делаем фикс : 

в admin\view\javascript\ckeditor\config.js

после строки 

config.resize_enabled = false;

прописать 

config.allowedContent = true;
 

 

 

ЛИЦЕНЗИЯ 

Лицензия выдается на один домен. Также при необходимости на тестовый поддомен.

Ключ будет выслан автоматически на почту покупателя сразу после вашего заказа. Если по какой-то причине письма нет - пишите на почту или в лс.

 

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

 

ПРОСЬБА УКАЗЫВАТЬ ДОМЕН СРАЗУ ПРИ ПОКУПКЕ

 

Также смотрите модули:

Accordion & Tabs & Steps, Faq & HowTo Microdata, any place & content

Smart Video Widgets - видео в фоне, баннера, изображения, уведомления с настройкой условий показа

Google Reviews - отзывы с гугл карт (Google Business) с виджетом доверия + отзывы о товарах

 

spacer.png

 


  • Автор
  • долучення
    12.11.20
  • Категорія
  • Системные требования
  • Метод активации
    По запросу в ЛС
    По запросу на почту
  • Ioncube Loader
    Нет
  • ocStore
    3.0
    2.3.0.2.4
    2.3
    2.2
    2.1
  • OpenCart.Pro, ocShop
    Opencart.pro 2.3
    Opencart.pro 2.1
    OcShop 2.0.3.х
  • Звернення до сервера розробника
    Нет

 

Ссылка на комментарий
Поделиться на других сайтах

  • 5 недель спустя...

Здравствуйте! 

Подскажите, пожалуйста, после установки модуля - все сработает как указано в описании автоматически? Или нужно будет ручками что-то делать? 

На демке при нажатии на видео всплывает окно с видео, где нужно ещё раз его запустить. Одним кликом реально запустить видео? 

В карточке товара сработает? 

Изменено пользователем Sergeyy84
Ссылка на комментарий
Поделиться на других сайтах


Здравствуйте! 

 

1 час назад, Sergeyy84 сказал:

Подскажите, пожалуйста, после установки модуля - все сработает как указано в описании автоматически? Или нужно будет ручками что-то делать? 

если вставляете iframe обычным способом без каких либо оберток для адаптивности - все будет работать. Вручную ничего не менять.

 

1 час назад, Sergeyy84 сказал:

На демке при нажатии на видео всплывает окно с видео, где нужно ещё раз его запустить. Одним кликом реально запустить видео? 

 

 Конечно должно работать с 1 клика. На днях заметили такой баг, но я не успел выпустить обновление. Поправленную версию сброшу.  Модуль только выпустил, могут всплывають проблемы по мере покупок, но я на связи и оперативно исправляю.

Ссылка на комментарий
Поделиться на других сайтах

1 час назад, Sergeyy84 сказал:

В карточке товара сработает? 

Да, работает на всех страницах

Ссылка на комментарий
Поделиться на других сайтах

Модуль обновлен 

1.0.1

  • исправление ошибок
  • улучшение совместимости с разными вариантами iframe вставок
  • исправление ошибки autoplay
Ссылка на комментарий
Поделиться на других сайтах

  • 2 недели спустя...

Добрый день.

Нажимаю https://yadi.sk/i/EEZVnA4FQw02ug установить, вылезает такая ошибка:

https://yadi.sk/i/ru-k0-z0gGj7Eg

В чем проблема?

Ссылка на комментарий
Поделиться на других сайтах


.

Ссылка на комментарий
Поделиться на других сайтах

9 часов назад, pixel88 сказал:

В чем проблема?

Здравствуйте, не могу просмотреть на яндекс диске скрины, просьба в другом сервисе сделать

Ссылка на комментарий
Поделиться на других сайтах

Цитата

Здравствуйте, не могу просмотреть на яндекс диске скрины, просьба в другом сервисе сделать

При нажатии на установить где список модулей появляется следующая ошибка:

Parse error: syntax error, unexpected '.', expecting ',' or ';' in /var/www/u0206593/data/www/neoboi33.ru/admin/controller/extension/module/ldev_yt_iframe.php on line 22

 

Я и не знал что яндекс запретили у вас. Дублирую.

https://ibb.co/wLjxJjV

https://ibb.co/WznKzzH

Изменено пользователем pixel88
Ссылка на комментарий
Поделиться на других сайтах


.

Ссылка на комментарий
Поделиться на других сайтах

1 час назад, pixel88 сказал:

При нажатии на установить где список модулей появляется следующая ошибка:

Parse error: syntax error, unexpected '.', expecting ',' or ';' in /var/www/u0206593/data/www/neoboi33.ru/admin/controller/extension/module/ldev_yt_iframe.php on line 22

 

Я и не знал что яндекс запретили у вас. Дублирую.

https://ibb.co/wLjxJjV

https://ibb.co/WznKzzH

не пойму откуда такая проблема. Дайте доступ в админку + фтп, поправлю и сразу активирую вам модуль. Доступы в лс бросьте

Ссылка на комментарий
Поделиться на других сайтах

Добрый вечер. У меня ocStore 2.3.0.2.3 шаблон UniShop v2.5.0.0. Установил дополнительный модификатор для данного шаблона для видео с YouTube во вкладке товара. Все работает но просели показатели по загрузке карточки товара пример https://my-kepka.com/panamy/letnyaya-panama-sparsil. Вопрос будет ли ваш модуль корректно работать с данной сборкой и не возникнут ли проблемы при установке а также повысит ли показатели загрузки страниц?

 

Ссылка на комментарий
Поделиться на других сайтах


11 часов назад, pchela78 сказал:

Добрый вечер. У меня ocStore 2.3.0.2.3 шаблон UniShop v2.5.0.0. Установил дополнительный модификатор для данного шаблона для видео с YouTube во вкладке товара. Все работает но просели показатели по загрузке карточки товара пример https://my-kepka.com/panamy/letnyaya-panama-sparsil. Вопрос будет ли ваш модуль корректно работать с данной сборкой и не возникнут ли проблемы при установке а также повысит ли показатели загрузки страниц?

 

Здравствуйте! 

Модуль будет работать, скорость загрузки вырастет, потому что каждое видео будет заменено на изображение. По установке - проблем быть не должно, но модуль ещё молодой, по этому все случаи невозможно предсказать.

Ссылка на комментарий
Поделиться на других сайтах

Установил модуль, все очень просто и легко. Скорость загрузки страниц товара с видео возросла. Модуль работает. Автору респект!

  • +1 1
Ссылка на комментарий
Поделиться на других сайтах


26 минут назад, pchela78 сказал:

Установил модуль, все очень просто и легко. Скорость загрузки страниц товара с видео возросла. Модуль работает. Автору респект!

спасибо, если будут вопросы - обращайтесь ) 

Ссылка на комментарий
Поделиться на других сайтах

Цитата

не пойму откуда такая проблема. Дайте доступ в админку + фтп, поправлю и сразу активирую вам модуль. Доступы в лс бросьте

 

Все работает, спасибо за оперативность) Модуль рекомендую.

Ссылка на комментарий
Поделиться на других сайтах


  • 1 месяц спустя...

Решил поделится информацией, может пригодиться. Если хотите загрузить изображения для видео на превью, не загружайте через загрузчик изображений в админке модуля, он все буквы делает прописными, и ничего не работает.

    hjplwzeswby.jpg

А когда заливаете сразу на сервер, то все работает. Имя отображается правильно:

    hjPLWZeswbY.jpg

 

Ссылка на комментарий
Поделиться на других сайтах


  • 4 недели спустя...
В 08.03.2021 в 16:54, pixel88 сказал:

Решил поделится информацией, может пригодиться. Если хотите загрузить изображения для видео на превью, не загружайте через загрузчик изображений в админке модуля, он все буквы делает прописными, и ничего не работает.

    hjplwzeswby.jpg

А когда заливаете сразу на сервер, то все работает. Имя отображается правильно:

    hjPLWZeswbY.jpg

 

Спасибо, что поделились. При тестировании заметил такое поведение на oc3.

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

Ссылка на комментарий
Поделиться на других сайтах

  • 4 месяца спустя...

Прекрасный модуль. Спасибо. Такой вопрос, Можно ли делать привязку нескльких видеороликов к конкретному товару, и как он будет выводиться? В отдельной вкладке Видео, в описании, в дополнительных изображениях в конце превью ?  Имею ввиду добавлять видео к товару как на скрине примерно.
 

Изменено пользователем Facebook
Ссылка на комментарий
Поделиться на других сайтах


В 27.08.2021 в 05:44, Facebook сказал:

Прекрасный модуль. Спасибо. Такой вопрос, Можно ли делать привязку нескльких видеороликов к конкретному товару, и как он будет выводиться? В отдельной вкладке Видео, в описании, в дополнительных изображениях в конце превью ?  Имею ввиду добавлять видео к товару как на скрине примерно.

Здравствуйте! 

По вашему вопросу, тут немного другая специфика модуля. Он не создает никаких доп полей или вкладок в админке. Он работает с выводом на странице и преобразует все выводимие iframe с видео в изображения-превью. А как эти видео добавлены, это уже не вопрос модуля. Может быть в описании среди текста, или доп полем через какой то модуль. 

Вы можете добавить сколько угодно iframe с видео в поле описания товара, они все будут преобразованы в изображения и выводится в том месте описания, где вы добавите код с iframe.

Ссылка на комментарий
Поделиться на других сайтах

21 час назад, Seriusis сказал:

немного другая специфика модуля

Ясно.  Спасибо за разьяснения, Но оставлю тогда тот же модуль. 

Ссылка на комментарий
Поделиться на других сайтах


  • 6 месяцев спустя...

Внимание!

 

В связи с вторжением войск Российской Федерации 24.02.2022 на территорию ******ы и началом войны тех. поддержка для сайтов торгующих в рублях РФ и РБ прекращена на неопределенный срок а модуль не продается.

  • +1 1
Ссылка на комментарий
Поделиться на других сайтах

  • 7 месяцев спустя...

Модуль чудовий. Швидкість PageSpeed значно виросла. Popup вікно це взагалі те, чого мені не вистачало.

Питання: Ви не думали зробити так, щоб в атрибут alt картинки-превьюшки копіювався текст з назви відео на Youtube?

Ссылка на комментарий
Поделиться на других сайтах


В 25.10.2022 в 21:13, roha012 сказав:

Модуль чудовий

дякую

В 25.10.2022 в 21:13, roha012 сказав:

Ви не думали зробити так, щоб в атрибут alt картинки-превьюшки копіювався текст з назви відео на Youtube?

На жаль такої можливості немає. У iframe вставках заголовок не вказується. 

Ссылка на комментарий
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.