Как в OpenCart добавить видео

29 Мая 2022г. в 04:33

Итак, давайте рассмотрим в этой статье варианты добавления видео в OpenCart. К примеру, на сайте есть стандартная страница О нас, давайте добавим видео в нее. Для этого в админке идем в меню Каталог – Статьи и открываем для редактирования искомую статью.

На панели редактора можно найти иконку добавления видео:

Как в OpenCart добавить видео

Клик по иконке откроет модальное окно, в котором нам предлагают вставить ссылку на страницу с видео. Я возьму видео с нашего канала YouTube и скопирую ссылку на него.

Как в OpenCart добавить видео

Остается лишь нажать на кнопку Вставить видео и сохранить статью. В результате мы увидим добавленное видео на странице статьи.

Как в OpenCart добавить видео

Не сложно, не так ли? Однако, на самом деле такой простой вариант вряд ли подойдет большинству сайтов, поскольку вставленное видео не является адаптивным. Если сейчас начать уменьшать окно браузера, то в определенный момент появится горизонтальный скролл.

Как в OpenCart добавить видео

Чтобы видео стало адаптивным, нам потребуется специальная разметка фреймворка Bootstrap, код которой можно найти в документации. Сформируем нужный нам код:

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/IPxhhFDAiPw"></iframe>
</div>
1
2
3
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/IPxhhFDAiPw"></iframe>
</div>
Остается лишь вставить этот код в статью. Сделать это нужно в редакторе в режиме кода. Для перевода редактора в режим кода кликаем по соответствующей иконке на панели редактора и вставляем код.

Как в OpenCart добавить видео

После вставки кода возвращаем редактор в стандартный режим, видео при этом должно отобразиться в редакторе, как и ранее. Сохраняем статью и проверяем изменения на сайте. Если все сделано верно, то видео должно быть адаптивным.