Responsive video embed в WordPress с шаблоном на основе Bootstrap
Решил добавить респонсивности видеозаписям в шаблоне на основе bootstrap 3. В вордпресс оказалось это очень легко. Достаточно применить фильтр добавив нижеуказанный код в файл functions.php.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | // Добавляем фильтр для 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>'; } |
Результат
Стоит отметить то, что данный код будет работать, только для вновь добавленных записей, а так же в том случае, если старая запись будет обновлена.