Адаптивные видео в шаблонах с Bootstrap (Решено)

В Bootstrap-е есть замечательная возможность сделать встраиваемые видео адаптивными. Для этого нужно для iframe (или object) видео присвоить класс embed-responsive-item, а затем обернуть в блок с классом embed-responsive embed-responsive-16by9 (source).
<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 комментариев

avatar
Так как в ls используется парсер, то лучше вносить изменения напрямую в него, конечно не кросстемно, но будет вполне рабочий вариант.

Если кто напишет сразу готовый вариант, готов от себя скинуть 150 р. на пиво :-)
avatar
<style>
	.video-container {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 30px;
		height: 0;
		overflow: hidden;
	}
	.video-container iframe,  
	.video-container object,  
	.video-container embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.video-wrapper {
		width: 600px;
		max-width: 100%;
	}
</style>

<div class="video-wrapper">
	<div class="video-container">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/HyNcbVuDJyA" frameborder="0" allowfullscreen></iframe>
	</div>
</div>
avatar
хм, в этом варианте не используется бутстрап стили :)
А добавка прямой стилевой вставки в хидер шаблона тоже не совсем правильно. :)
Скиньте вебмани кошелек в сообщения мне — 50 р. Так как вариант не совсем рабочий)
avatar
Я думал что Вы в теме, но раз уж так, в CSS нужно добавить:
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-wrapper {
	width: 600px;
	max-width: 100%;
}

хм, в этом варианте не используется бутстрап стили :)
Не могу понять это плохо или хорошо, Вам же вроде для НЕ бутстрапа нужны были.
avatar
Мне как раз именно модификация для бутстрапа нужна, напишите мне в личку :)
avatar
Вы не можете добавить стили в CSS???
avatar
Топик обновлен — добавлено решение (js)
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.