От автора: приветствую вас, друзья. Итак, мы продолжаем цикл статей, посвященных знакомству с одной из популярнейших CMS для создания интернет-магазинов – OpenCart (Опенкарт). В этой статье мы поговорим о том, как в OpenCart добавить видео.
Итак, давайте рассмотрим в этой статье варианты добавления видео в OpenCart. К примеру, на сайте есть стандартная страница О нас, давайте добавим видео в нее. Для этого в админке идем в меню Каталог – Статьи и открываем для редактирования искомую статью.
На панели редактора можно найти иконку добавления видео:
Клик по иконке откроет модальное окно, в котором нам предлагают вставить ссылку на страницу с видео. Я возьму видео с нашего канала YouTube и скопирую ссылку на него.

Бесплатный курс по PHP программированию
Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC
В курсе 39 уроков | 15 часов видео | исходники для каждого урока
Получить курс сейчас!Остается лишь нажать на кнопку Вставить видео и сохранить статью. В результате мы увидим добавленное видео на странице статьи.
Не сложно, не так ли? Однако, на самом деле такой простой вариант вряд ли подойдет большинству сайтов, поскольку вставленное видео не является адаптивным. Если сейчас начать уменьшать окно браузера, то в определенный момент появится горизонтальный скролл.
Чтобы видео стало адаптивным, нам потребуется специальная разметка фреймворка Bootstrap, код которой можно найти в документации. Сформируем нужный нам код:
1 2 3 |
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/IPxhhFDAiPw"></iframe> </div> |
Остается лишь вставить этот код в статью. Сделать это нужно в редакторе в режиме кода. Для перевода редактора в режим кода кликаем по соответствующей иконке на панели редактора и вставляем код.
После вставки кода возвращаем редактор в стандартный режим, видео при этом должно отобразиться в редакторе, как и ранее. Сохраняем статью и проверяем изменения на сайте. Если все сделано верно, то видео должно быть адаптивным.
Так и есть, никакого скролла нет, мы вставили видео с Ютуба и оно адаптивно. На этом сегодня все. Больше об OpenCart вы можете узнать из наших бесплатных или платных уроков.

Бесплатный курс по PHP программированию
Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC
В курсе 39 уроков | 15 часов видео | исходники для каждого урока
Получить курс сейчас!
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видео
Комментарии (4)