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

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

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

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

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

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

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

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

Оценки: 2

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