Адаптивное видео для 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%;
}

Заключение

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

Информация по теме