Адаптивное видео для DLE
Хак решает проблему адаптивности видео под разные разрешения экрана, вставленные с помощью тега
[media=]
Тестировалось на DLE 10.6, но должно работать и на предыдущих версиях.
Инструкция
Открываем файл: /engine/classes/parse.class.php
Находим:
$url = $this->clear_url( urldecode( $url ) );
Добавляем ВЫШЕ:
// Считаем стороны $ar = $width / $height; // В зависимости от сторон, устанавливаем css класс из bootstrap $ar_mod = ( abs($ar-(4/3)) < abs($ar-(16/9)) ? 'embed-responsive-4by3' : 'embed-responsive-16by9');
Находим 2 раза:
return "<!--dle_media_begin:
Заменяем на:
$html = "<!--dle_media_begin:
Находим 3 раза:
return '<!--dle_media_begin:'.$decode_url
Заменяем на:
$html = '<!--dle_media_begin:'.$decode_url
Находим:
} function build_url( $matches=array() ) {
И добавляем выше до фигурной скобки:
// Удаляем длину \ ширину из 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>';
Открываем папку с шаблоном, находим в ней файл стилей css с названием engine.css и добавляем в любое место:
.embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; } .embed-responsive iframe { position: absolute; top: 0; left: 0; bottom: 0; height: 100%; width: 100%; border: 0; } .embed-responsive-16by9 { padding-bottom: 56.25%; } .embed-responsive-4by3 { padding-bottom: 75%; }
Заключение
Вот собственно и все. Не забываем только про то, что новости должны быть пере-сохранены, иначе изменения для старых новостей в силу не вступят.
Информация по теме