Адаптивное видео для DLE

Адаптивное видео для DLE

Хак, устанавливаемый через систему управления плагинами, решает проблему адаптивности видео под разные разрешения экрана, вставленных с помощью тега
[media=]
 
Установка:
1. Открыть 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>';

2. Добавить в стили шаблона 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%;
}

3. Сделать перестроение публикаций.

Готово!
 
Версия DLE: 10.6
 
Автор: Mofsy
Источник:
  • Oxigen
  • 0
  • 474
Информация
Оставлять комментарии могут только зарегистрированные посетители.
  • Рейтинг@Mail.ru
  • Яндекс.Метрика