Как по умолчанию сделать видео адаптивным в OpenCart

Не залезая в исходный код.

В чём проблема

Когда вы вставляете видео с ютуба (кнопка «Видео») оно имеет размеры 640х360. Чтобы сделать его адаптивным, приходится лезть в код и дополнять его. Это неудобно и неприятно.

Как автоматизировать

У меня по умолчанию установлен редактор summernote, поэтому инструкция для него.

  1. Перейти в admin/view/javascript/summernote/summernote.js.
  1. Найти код (у меня он находится на 6463 строке):
$video.addClass('note-video-clip');

return $video[0];
  1. Заменить его на:
var $embed;
var $embed = $('<div>').addClass('embed-responsive').addClass('embed-responsive-16by9');

$video.addClass('note-video-clip').addClass('embed-responsive-item');
$video.appendTo($embed);

return $embed[0];
  1. Сохраняем, обновляем кэш и вот это всё.
  1. Теперь при добавлении видео оно сразу будет адаптивным.
  1. Это не всё. Теперь добавим возможность включать полноэкранный режим.
  1. В том же файле найти код (у меня он находится на 6418 строке):
var $video;
if (ytMatch && ytMatch[1].length === 11) {
    var youtubeId = ytMatch[1];
    $video = $('<iframe>')
        .attr('frameborder', 0)
        .attr('src', '//www.youtube.com/embed/' + youtubeId)
        .attr('width', '640').attr('height', '360');
  1. Добавляем после последнего .attr:
.attr('allowfullscreen', '');
  1. Сохраняем, обновляем кэш и вот это всё.
  1. Готово.
Поделиться
Отправить
1 мес   OpenCart 3