• Страница 1 из 1
  • 1
Модератор форума: JonMagon  
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Авторазмер видео с youtube под ширину сайта. (Как автоматически подстраивать видео YouTube под ширину сайт)
Авторазмер видео с youtube под ширину сайта.
SergeyZhuk
Сообщений: 87
Репутация: 17

Сообщение # 1 | 14:46:28
День добрый, возникла потребность в резиновой форме плеера с YouTube. Через некоторое время поисков на просторах Рунета наткнулся на одно решение, а именно:
Для начала нужно указать контейнер, в котором будет находится видео. По ширине этого контейнера и будет вычисляться ширина видео. Я предлагаю использовать для автоматически растягивающегося видео простой DIV.
Пример:


Код
<div class="video">$EMBOBJECT$</div>
CSS

Код
div.video { width: 100% }
Скрипт
Скрипт нужно вставить до закрытия тега body, как можно ниже, чтобы он начинал работу уже после загрузки кода видео. Прямо перед строчкой </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>

Способ работает, все классно! Но подскажите как поправить скрипт, что-бы "ресайзнутное" видео формировалось на 1% меньше
Сообщение отредактировал SergeyZhuk - Пятница, 04 Окт 2013, 15:10:19
JacksonMihailov
Сообщений: 259
Репутация: 107

Сообщение # 2 | 15:04:55
Во первых в функциях замените };); на )};
Ищите проблему в
Код
var newWidth = $fluidEl.width();

Можно попробовать что то такое


Код
var newWidth = $fluidEl.width() - 10;

jmDB - Текстовая база данных для uCoz
SergeyZhuk
Сообщений: 87
Репутация: 17

Сообщение # 3 | 15:13:18
JacksonMihailov, спасибо, я уже решил проблему. Не надо уже. Скрипт хороший, 100% рабочий, мож пригодится кому biggrin

Добавлено (04 Окт 2013, 15:13:18)
---------------------------------------------
JacksonMihailov, Кстати var newWidth = $fluidEl.width() - 10; -то что надо, спасибо wink

Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Авторазмер видео с youtube под ширину сайта. (Как автоматически подстраивать видео YouTube под ширину сайт)
  • Страница 1 из 1
  • 1
Поиск: