Адаптивные видео в шаблонах с Bootstrap (Решено)
В Bootstrap-е есть замечательная возможность сделать встраиваемые видео адаптивными. Для этого нужно для iframe (или object) видео присвоить класс embed-responsive-item, а затем обернуть в блок с классом embed-responsive embed-responsive-16by9 (source).
Естественно, это будет работать только на bootstrap-based скинах. Благо, таковых много, в основном благодаря vOFFka , за что ему огромное спасибо!
Задумался, как реализовать это в Livestreet:
Все работает, если подкорректировать замену тега video, добавив указанную выше конструкцию в Text.class.php.
Однако подобные изменения коснутся любого скина. У нас же фича скин-специфичная.
Вопрос:
Как реализовать подобную обертку, чтобы она работала только для определенного скина? М.б. js?
UPD: Решение при помощи js:
В файл template.js в шаблоне добавляем две строки:
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div>
Естественно, это будет работать только на bootstrap-based скинах. Благо, таковых много, в основном благодаря vOFFka , за что ему огромное спасибо!
Задумался, как реализовать это в Livestreet:
Все работает, если подкорректировать замену тега video, добавив указанную выше конструкцию в Text.class.php.
Однако подобные изменения коснутся любого скина. У нас же фича скин-специфичная.
Вопрос:
Как реализовать подобную обертку, чтобы она работала только для определенного скина? М.б. js?
UPD: Решение при помощи js:
В файл template.js в шаблоне добавляем две строки:
$("iframe").addClass('embed-responsive-item'); $("iframe").wrap('<div class="embed-responsive embed-responsive-16by9"/>');
7 комментариев
Если кто напишет сразу готовый вариант, готов от себя скинуть 150 р. на пиво :-)
А добавка прямой стилевой вставки в хидер шаблона тоже не совсем правильно. :)
Скиньте вебмани кошелек в сообщения мне — 50 р. Так как вариант не совсем рабочий)
Не могу понять это плохо или хорошо, Вам же вроде для НЕ бутстрапа нужны были.