Responsive video embed в WordPress с шаблоном на основе Bootstrap

3 лет, 1 месяц назад WordPress , Песочница 0 комментариев

Решил добавить респонсивности видеозаписям в шаблоне на основе bootstrap 3. В вордпресс оказалось это очень легко. Достаточно применить фильтр добавив нижеуказанный код в файл functions.php.

// Добавляем фильтр для oembed_dataparse
add_filter( 'oembed_dataparse','responsive_video_wrap_oembed_dataparse',10,2);

function responsive_video_wrap_oembed_dataparse($html, $data)
{
	// Проверяем наличие oembed данных
	if(!is_object($data) || empty($data->type))
	{
		return $html;
	}

	// Если тип данных не является видео
	if(!($data->type === 'video'))
	{
		return $html;
	}

	// Считаем стороны
	$ar = $data->width / $data->height;

	// В зависимости от сторон, устанавливаем css класс из bootstrap
	$ar_mod = ( abs($ar-(4/3)) < abs($ar-(16/9)) ? 'embed-responsive-4by3' : 'embed-responsive-16by9');

	// Удаляем длину \ ширину из html
	$html = preg_replace( '/(width|height)="\d*"\s/', '', $html );

	// Возвращаем HTML
	return '<div class="embed-responsive '.$ar_mod.'" data-aspectratio="'.number_format($ar, 5, '.').'">'.$html.'</div>';
}

// Добавляем фильтр для oembed_dataparse

add_filter( 'oembed_dataparse','responsive_video_wrap_oembed_dataparse',10,2);

function responsive_video_wrap_oembed_dataparse($html, $data)

{

// Проверяем наличие oembed данных

if(!is_object($data) || empty($data->type))

{

return $html;

}

// Если тип данных не является видео

if(!($data->type === 'video'))

{

return $html;

}

// Считаем стороны

$ar = $data->width / $data->height;

// В зависимости от сторон, устанавливаем css класс из bootstrap

$ar_mod = ( abs($ar-(4/3)) < abs($ar-(16/9)) ? 'embed-responsive-4by3' : 'embed-responsive-16by9');

// Удаляем длину \ ширину из html

$html = preg_replace( '/(width|height)="\d*"\s/', '', $html );

// Возвращаем HTML

return '<div class="embed-responsive '.$ar_mod.'" data-aspectratio="'.number_format($ar, 5, '.').'">'.$html.'</div>';

}

Результат

https://www.youtube.com/watch?v=qrZwJ9U3b74

Стоит отметить то, что данный код будет работать, только для вновь добавленных записей, а так же в том случае, если старая запись будет обновлена.

Переведено на: Русский