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

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

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

Что делать

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

1. Открываем сайт/admin/view/javascript/summernote/summernote.js

2. Находим код (~6372 строка):

$video.addClass('note-video-clip');

return $video[0];

3. Заменяем его на:

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];

4. Сохраняем, обновляем кэш.

5. Теперь при добавлении видео оно сразу будет адаптивным.

6. Это не всё. Добавим возможность включать полноэкранный режим.

7. В этом же файле находим код (~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');

8. После последнего .attr добавляем:

.attr('allowfullscreen', '');

9. Сохраняем, обновляем кэш.

10. Готово.