DoctorMario.RU

 На одном из сайтов с резиновым дизайном на движке DLE понадобилось подгонять ширину видео под ширину блока новостей. Как это сделать под катом.

В этом нам поможет небольшой js-скрипт который разработал Chris Coyier, и  немного усовершенствовал Mathias Bynens.

Видео на сайте должно добавляться при помощи тега [mеdiа=***]

1. Идем -  Админка - настройка проигрывателей медиаконтента ставим размер видео 1280 750

2. Открываем файл engine/classes/parse.class.php
Строка примерно 723 меняем -

  } else return '<!--dle_media_begin:'.$decode_url.'--><iframe title="YouTube video player" width="'.$width.'" height="'.$height.'" src="http://www.youtube.com/embed/'.$video_link.'?rel='.intval($this->video_config['tube_related']).'&wmode=transparent" frameborder="0" allowfullscreen></iframe><!--dle_media_end-->';

заменить на

 } else return '<!--dle_media_begin:'.$decode_url.'--><div class="video"><iframe title="YouTube video player" width="'.$width.'" height="'.$height.'" src="http://www.youtube.com/embed/'.$video_link.'?rel='.intval($this->video_config['tube_related']).'&wmode=transparent" frameborder="0" allowfullscreen></iframe></div><!--dle_media_end-->';

3. Открываем файл - templates/ваш шаблон/css/engine.css

добавляем стиль -

div.video { width: 100% }

4. Открываем файл templates/ваш шаблон/main.tpl и перед закрывающим шаблоном </body>

вставляем код -

<script type="text/javascript">
$(function() {
 
        // находим видео YouTube
        var $allVideos = $("iframe[src^='http://www.youtube.com']"),
 
            // Элемент с плавающей шириной
            $fluidEl = $(".video");
 
        // Сохранение пропорций видео
        $allVideos.each(function() {
 
                $(this)
                        .data('aspectRatio', this.height / this.width)
 
                        // удаление ширину и высоты из оригинального кода
                        .removeAttr('height')
                        .removeAttr('width');
 
        });
 
        // когда окно браузера изменяет размеры
        $(window).resize(function() {
 
                var newWidth = $fluidEl.width();
 
                // изменение размеров видео с сохранением пропорций
                $allVideos.each(function() {
 
                        var $el = $(this);
                        $el
                                .width(newWidth)
                                .height(newWidth * $el.data('aspectRatio'));
 
                });
 
        // фиксирование размеров и отображение видео
        }).resize();
 
});</script>

 Теперь каждое новое добавленное видео будет растягиваться по ширине.