18 октября, 12:30
Конференция для селлеров одежды и аксессуаров
Практические рекомендации, разбор кейсов, нетворкинг.Подробнее Подробнее
Реклама
ООО Инсейлс Рус ИНН 7714843760 erid: 2RanyoC2uRi
Получите продающий сайт «под ключ» за 20 дней: уникальный дизайн, подключение интеграций, удобный функционал
Реклама. ООО «Инсейлс Рус»‎ ИНН 771484376 erid: 2Ranyo5dJeU

Как вставить видео на сайт

inSales предлагает несколько вариантов размещения видеороликов на страницах магазина.

  1. Автоматическая вставка видео с видеохостингов
  2. Вставка видео с видеохостингов через код шаблона
  3. Адаптация видео для всех экранов
  4. Альтернативное видео

Автоматическая вставка видео с видеохостингов

Способ подходит, если контент редактируется через визуальный редактор inSales, который применяется для описаний товаров, категорий и содержимого иных страниц в панели администратора. В редакторе есть опция "Вставить/редактировать видео":

1. Зайдите на страницу нужного видео и скопируйте адрес страницы из адресной панели браузера (правой кнопкой мыши или комбинацией Ctrl+C / Cmd+C):

2. Выберите упомянутый выше инструмент "Вставить/редактировать видео" и вставьте в поле "Источник" скопированный адрес (1). При необходимости можно сразу задать нужные ширину и высоту ролика в пикселях (2):

3. Результат:

Вставка видео с видеохостингов через код шаблона

Данный способ удобен в том случае, если нужно вставить ролик в коде шаблона, где нет визуального редактора и инструмента "Вставить/редактировать видео".

1. Как правило, на видеохостингах под каждым видео есть кнопка "Поделиться". В случае с YouTube она выглядит так:

2. После нажатия "Поделиться" выберите "Встроить":

3. Далее кликните по предложенному iframe-коду и скопируйте его:

4. После этого перейдите в нужное место в коде сайта и добавьте скопированное содержимое. Например:

Адаптация видео для всех экранов

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

Как видно на скриншоте, ролик имеет фиксированную ширину и не сжимается. Это можно исправить несколькими способами.

Самый легкий метод заставить такие ролики стать адаптивными по ширине — добавить свойство max-width:

iframe { max-width: 100%; }

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

Недостаток описанного способа — видео будет сжиматься только по горизонтали. Это приведет к тому, что на некоторых телефонах посетители станут видеть черные полосы сверху и снизу:

Для большинства пользователей это не является критичным, но если нужно получить полную автоматическую адаптивность для всех видеороликов, независимо от их ширины/высоты, техническая поддержка может сделать такую доработку с помощью скриптов на платной основе. Чтобы уточнить стоимость доработки, необходимо создать тикет.

В сети также можно найти варианты на чистом CSS, без использования скриптов, но они подходят только для тех случаев, когда у всех видео соотношение сторон абсолютно одинаковое. Например, когда один ролик идет в формате 16:9, а другой — 1:1, то нужно будет для каждого из таких вариантов вручную прописывать свои стили.

Альтернативное видео

При необходимости во вкладке "Расширенные" в окне вставки видео можно указать ссылку на альтернативное видео:

Данное поле для видео напрямую отдаётся по ссылке, не через iframe, а через тег video, внутри которого может быть несколько источников (source).

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

Например, можно вставить ссылку на видео в поле "Источник" во вкладке "Общее", потом другую ссылку на это же самое видео в поле "Альтернативный источник". В поле "Альтернативный источник" может быть видео в другом формате или с другим кодеком.

Оставить оценку

Оценка успешно отправлена.
Она будет проверена администратором перед публикацией.
Перед публикацией все оценки проходят модерацию

Оценки: 2

Комментарий
Помогло
Комментарий
Коротко и по делу. Полезная статья, спасибо.
Остались вопросы?
Отправь тикет в техподдержку!
Еще нет своего магазина?
Создайте интернет-магазин на платформе inSales
Всё для продаж уже внутри!
Нажимая кнопку «Зарегистрироваться», я принимаю Пользовательское соглашение и Политику конфиденциальности
Недавно просмотренные статьи
Продолжая пользоваться сайтом,
вы соглашаетесь с использованием cookie