Rose debug info
---------------

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

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

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

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

Что делать

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

  1. Открываем сайт/admin/view/javascript/summernote/summernote.js
  1. Находим код (~6372 строка):
$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. В этом же файле находим код (~6327 строка):
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. Готово.
Подписаться на канал
Поделиться
Отправить
 753   2020   OpenCart 3   работа