|
|
Модератор форума: JonMagon |
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Авторазмер видео с youtube под ширину сайта. (Как автоматически подстраивать видео YouTube под ширину сайт) |
Авторазмер видео с youtube под ширину сайта. |
День добрый, возникла потребность в резиновой форме плеера с YouTube. Через некоторое время поисков на просторах Рунета наткнулся на одно решение, а именно:
Для начала нужно указать контейнер, в котором будет находится видео. По ширине этого контейнера и будет вычисляться ширина видео. Я предлагаю использовать для автоматически растягивающегося видео простой DIV. Пример: Код <div class="video">$EMBOBJECT$</div> Код 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, спасибо, я уже решил проблему. Не надо уже. Скрипт хороший, 100% рабочий, мож пригодится кому
Добавлено (04 Окт 2013, 15:13:18) |
| |||
| |||