Добавление видео на сайт

В данной статье рассмотрим как добавить видео к товару и на страницы сайта

• Добавление видео к товару
  • Добавление видео с YouTube
  • Добавление видео с RuTube
  • Добавление видео с VK
• Как разместить видео на страницах сайта

Добавление видео к товару

Переходим в редактирование товара во вкладку "Видео", далее нажимаем на кнопку "Прикрепить" (рис.1).

Рисунок 1.

Добавление видео с YouTube

В открывшемся окне вам нужно указать название, описание видео и ссылку или код плеере на видео в YouTube  (рис.2).

Рисунок 2.

Либо код  плеера видео (рис.3) и нажимаем "Сохранить".

Рисунок 3.

Добавление видео RuTube

Чтобы добавить видео с RuTube, необходимо использовать код плеере. Копируем id видео и размещаем его в код плеере вида:

<iframe width="720" height="400" src="https://rutube.ru/play/embed/77fdb9310dc52ba29fb365a689c868ca" frameBorder="0" allow="clipboard-write; autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
 

Рисунок 4.

По ссылке добавить видео с RuTube возможности нет. По ссылке добавляются которкие видео shorts.

У видео (shorts) с RuTube копируем ссылку (рис.5).

Рисунок 5.

В окне добавления видео  выбираем тип добавления ссылка и указываем скопированную ссылку (рис.6).

Рисунок 6.

Добавление видео с VK

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

Переходим к настройкам видео, нажимаем ссылку поделиться (рис.7).

Рисунок 7.

В открывшемся окне выбираем вкладку Экспортировать, копируем ссылку (рис.8).

Рисунок 8.

Далее переходим в режим редактирования товара, вкладка Видео, нажимаем Прикрепить. В открывшемся окне выбираем ссылка и указываем скопированную ссылку (рис.9).

Рисунок 9.

Через код видео можно разместить аналогично видео с RuTube 

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

Видео товара в клиентской части

Данная функция позволяет посмотреть видеоролик, например, с Youtube или  Rutube и это видео будет отображено на месте, где выводится фотография.
Например, такой способ подходит, если у Вас есть отснятый короткий ролик товара, скажем в обзоре 360 градусов, тогда данный ролик будет идеальным дополнением к фотографиям товара.
Иконка в клиентской части, выглядит вот так (рис.10).

Рисунок 10.

Нажав на которую появится всплывающее окно с роликом (рис.11).

Рисунок 11.

Вкладка видео при этом никуда не пропала, на неё так же можно перейти и посмотреть видеоролик там (рис.12).

Рисунок 12.

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

Далее рассмотрим, как добавить видео на другие страницы сайта.

Как разместить видео на страницах сайта

• Как добавить свое видео на сайт c YouTube
• Как добавить свое видео на сайт c RuTube
• Как добавить свое видео на сайт c VK

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

Предварительно требуется загрузить свое видео на YouTube. Далее нажимаем на кнопку "Поделиться" под роликом (рис.13).

Рисунок 13.

Выбираем "Копировать" (рис.14).

Рисунок 14.

Вставьте ссылку на видео на любую страницу сайта через встроенный плагин (рис.15 - 16).

Рисунок 15.

Рисунок 16.

Проверяем как выглядит в клиентской части сайта (рис.17).

Рисунок 17.

Далее рассмотрм, как добавить свое видео на сайт c RuTube.

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

Предварительно требуется загрузить свое видео на RuTube.  Далее нажимаем на кнопку "Поделиться" под роликом (рис.18).

Рисунок 18.

Копируем код видео (рис.19).

Рисунок 19.

Размещаем данную ссылку в код вида:

<iframe width="720" height="400" src="https://rutube.ru/play/embed/77fdb9310dc52ba29fb365a689c868ca" frameBorder="0" allow="clipboard-write; autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Данный код размещаем на любой странице  сайта через режим "Исходник" (рис.20).

Рисунок 20.

В режиме "Исходник" размещаем код видео и сохраняем (рис.21).

Рисунок 21.

Проверяем как выглядит в клиентской части сайта (рис.22).

Рисунок 22.

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

В описание или на стараницу сайта видео с VK можно добавить только размещая код в режиме "исходник".

Предварительно требуется загрузить свое видео на VK. Далее нажимаем на кнопку "Поделиться" под роликом. Копируем код вставки (рис.23).

Рисунок 23.

Переходим в режим редактировния страницы, где хотим разместить видео, в блоке описание переходим в режим Исходник и размещаем скопированный код (рис.24).

Рисунок 24.

Проверяем как выглядит в клиенской части (рис.25).

Рисунок 25.

Готово.