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

[Seriusis]

20
Завантажити / Придбати розширення

YouTube lazy load & popup - вставка відео з youtube, vimeo, галерея відео, оптимізація page speed сторінок з відео

---

Нова версія

Модуль вирішує проблему тривалого завантаження iframe з youtube та збільшує page speed. Дозволяє додавати відео youtube та vimeo у полях описів сторінок, додавати відео шорткордами, збирати відео у галерею на сторінці товару, відображати відео у popup

 

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

 

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

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

 

НАВІЩО

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

 

МОЖЛИВОСТІ

• підтримка youtube, youtube shorts, vimeo
• зручна вставка відео шорткодами
• відео по кліку на прев'ю
• спливаюче вікно з відео по кліку на прев'ю
• своє зображення для прев'ю
• вибір розміру прев'ю
• налаштування іконки 'play' (зображення, font awesome, html) та стилізація
• збирання відео у галерею на основі доданих iframe та шорткодів у описі товару
• вибір позиції галереї та її стилізація
• іконка відео у категорії 
• іконка відео у товарі (як опція відкриття галереї по кліку)
• 2 режими роботи галереї
• можливо вказати шляхи для виключення роботи модуля
• поля для кастомних стилів та js

 

ОСОБЛИВОСТІ

• буде працювати на всіх шаблонах та усіх сторінках
• максимально легкий модуль без залежностей (всього пару рядків css і ванільного js, жодних бібліотек)
• буде працювати навіть без бутстрапу та jquery
• відкритий код
• повна версія 2.0 лише для opencart/ocstore 2.2+, для старіших - версія 1
•  

ДЕМО

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

товар https://oc3.likedev.pro/imac

стаття https://oc3.likedev.pro/6-video

 

ЗАСТОСУВАННЯ

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

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

 

 

 

 

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

 

 

 

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

 

ВАЖЛИВО! Рекомендую використовувати режим POPUP для кращої сумісності з шаблонами, розміткою та адаптивністю відео.

 

ВСТАНОВЛЕННЯ

 

відео вставновлення

(Тільки тут фікс не потрібен, інше - так само)

Спойлер

 

 

Через установник в адмінці завантажуєте архів модуля ocmod для своєї версії опенкарт.

Для версій 2.x переконайтеся, що у вас вже встановлено модифікатор localcopy. ocmod, якщо його немає – встановіть.

 

PS. Для редактора CKeditor при вставці в режимі коду деяких тегів, у тому числі iframe, редактор їх чистить. У такому випадку робимо фікс:

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

після рядка

config. resize_enabled = false;

прописати

config. allowedContent = true;

 

Важливо: При використанні версії 2.0 модуля та модуля Accordion & Tabs переконайтеся, що Accordion & Tabs у вас версії 2.1.1, де випралена проблема сумісної роботи цих модулів.

 

ОНОВЛЕННЯ до версії 2.0:

1. Видалити модифікатор старої версії модуля Youtube lazy load and popup

2. Оновити модифікатори

3. Встановити архів нової версії як звичайне доповнення через установщик

4. У списку розширень видалити модуль та встановити заново 

 

ЛІЦЕНЗІЯ 

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

Ключ буде надіслано автоматично на пошту покупця одразу після вашого замовлення. Якщо з якоїсь причини листа немає - пишіть на пошту чи лс.

 

ПРОХАННЯ ВКАЗАТИ ДОМЕН ВІДРАЗУ ПРИ КУПІВЛІ

 

Також дивіться модулі:

Accordion & Tabs & Steps v2 - конструктор контенту

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

Google Reviews - відгуки з гугл карт (Google Business) з віджетом довіри + відгуки про товари

Grapes Web Builder - більше ніж візуальний редактор

 

 

 

 

 

 

---

• Автор
  Seriusis
• долучення
  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.х
• Звернення до сервера розробника
  Нет

 

[Sergeyy84]

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

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

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

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

Змінено 13 грудня 2020 користувачем Sergeyy84

[Seriusis]

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

 

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

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

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

 

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

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

 

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

[Seriusis]

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

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

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

[Seriusis]

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

1.0.1

• исправление ошибок
• улучшение совместимости с разными вариантами iframe вставок
• исправление ошибки autoplay

[pixel88]

Добрый день.

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

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

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

[Seriusis]

.

[Seriusis]

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

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

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

[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

Змінено 2 січня 2021 користувачем pixel88

[Seriusis]

.

[Seriusis]

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

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

[pchela78]

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

 

. 

[Seriusis]

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

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

 

. 

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

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

[pchela78]

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

[Seriusis]

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

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

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

[pixel88]

Цитата

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

 

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

[pixel88]

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

    hjplwzeswby.jpg

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

    hjPLWZeswbY.jpg

 

[Seriusis]

В 08.03.2021 в 16:54, pixel88 сказал:

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

    hjplwzeswby.jpg

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

    hjPLWZeswbY.jpg

 

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

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

[Facebook]

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

Змінено 27 серпня 2021 користувачем Facebook

[Seriusis]

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

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

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

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

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

[Facebook]

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

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

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

[Seriusis]

Внимание!

 

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

[roha012]

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

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

[Seriusis]

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

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

дякую

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

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

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

[test1986]

привет)) в сирч консольке появилась такая замечательная штука как страницы с видео

 

так вот, ищу модуль, который позволит выводить видео товара на страницах но вместе с тем его смогут просканировать роботы

 

сейчас у меня есть ваш модуль видео виджетов (и его не видят роботы)  и есть на другом сайте тоже модуль но его удалили с форума, вот ищу вариант, чтобы не мешал загрузке сайта и вместе с тем индексировался 

 

хееелп