Відеоогляд товару — це один із найефективніших способів підвищити довіру покупця. Коли людина бачить товар у дії, у неї зникає більшість сумнівів. Але просто вставити відео недостатньо — важливо, щоб воно однаково гарно виглядало і на великому моніторі, і на екрані смартфона.
На порталі Inbiz ми підготували покроковий гайд, як додати відео в опис товару на OpenCart 3, та ділимося кодом, який зробить ваше відео ідеально адаптивним.
Крок 1: Отримання коду на YouTube
Спершу нам потрібно отримати спеціальний код вставки (iframe) самого відео:
- Відкрийте потрібне відео на YouTube.
- Натисніть кнопку «Поділитися» (Share), а потім оберіть перший пункт — «Вставити» (Embed).
- Скопіюйте весь код, що з’явиться у вікні (він починається з тегу
<iframe...).
Крок 2: Додавання відео в адмінці OpenCart
Тепер переходимо до вашого магазину:
- Зайдіть у редагування потрібного товару, вкладка «Опис».
- У панелі інструментів текстового редактора натисніть кнопку «Вихідний код» (Source). Це важливо, адже ми вставляємо HTML-код, а не просто текст.
- Вставте скопійований код з YouTube у те місце, де хочете бачити відео (наприклад, у самому кінці опису).
Крок 3: Робимо відео адаптивним (для мобільних)
Стандартний код YouTube має фіксовану ширину, через що на телефонах відео часто «вилізає» за межі екрана. Щоб це виправити, ми використаємо спеціальний стиль.
Знайдіть у вашому вставленому коді фрагмент, де вказано width="560" height="315", і просто додайте після них цей магічний рядок:
style="width: 100%; height: auto; aspect-ratio: 16/9; border: 0;"
У результаті ваш код має виглядати приблизно так:
<iframe src="посилання_на_відео" width="560" height="315" style="width: 100%; height: auto; aspect-ratio: 16/9; border: 0;" allowfullscreen></iframe>
Цей короткий код змушує відео розтягуватися на всю ширину екрана, зберігаючи правильні пропорції 16:9 на будь-якому пристрої.
Висновок: Більше відео — більше продажів
Додавання відеооглядів — це інвестиція, яка окупається довірою клієнтів. Тепер ваші картки товарів виглядатимуть професійно і на ПК, і на смартфонах. А якщо ви хочете, щоб ваш магазин працював ще швидше та ефективніше — звертайтеся до команди Inbiz, ми знаємо про OpenCart все!