n-wp.ru — блог о WordPress
Как автоматически подстраивать видео YouTube под ширину блога | n-wp.ru

Как автоматически подстраивать видео YouTube под ширину блога

Часто в своих блогах я вставляю видео из YouTube. Делаю это без каких-либо хитростей — просто вставляю сгенерированный сервисом код в содержимое поста. Однако есть одна загвоздка, которая долго не давала мне покоя — видео плеер отображался с фиксированной шириной, в то время как ширина самого блога у меня обычно «резиновая». Это несоответствие между статикой и динамикой иногда давало и вовсе неприятные моменты — при смене темы видео часто оказывалось шире, чем установленная для ленты сообщений ширина, и поэтому оно или обрезалось, или появлялись горизонтальные полосы прокрутки. И я решил разобраться с этой проблемой раз и навсегда, сделать так, чтобы видео из YouTube никогда не было меньше или больше, а автоматически подстраивалось под ширину блога, какой бы она ни была. И я нашел простой способ сделать это.

Как автоматически подстраивать видео YouTube под ширину блога

Суть такова — работает скрипт, который автоматически вычисляет текущую ширину блога, отображаемую в браузере, и под нее изменяет ширину внедренного объекта.

Как автоматически подстраивать видео YouTube под ширину блога

Скрипт разработал Chris Coyier, и его немного усовершенствовал Mathias Bynens. Внедряется он за два простых шага.

Контейнер для видео

Для начала нужно указать контейнер, в котором будет находится видео. По ширине этого контейнера и будет вычисляться ширина видео. Я предлагаю использовать для автоматически растягивающегося видео простой DIV. Пример:

Ширину этого контейнера можно указать в style.css:

Скрипт

Скрипт нужно вставить до закрытия тега body, как можно ниже, чтобы он начинал работу уже после загрузки кода видео. Прямо перед строчкой <

, которая наверняка находится в файле footer.php, вставьте код скрипта: <

Обратите внимание на строчку 8 - в ней указан класс контейнера, по ширине которого подгоняется видео. Можно использовать другие обозначения контейнеров, например, <

, изменив восьмую строчку скрипта. Скрипт работает, если для вставки вы используете встраивание iframe. Как автоматически подстраивать видео YouTube под ширину блога

Для живого примера я встроил видео — попробуйте изменить ширину браузера, чтобы увидеть, как работает скрипт.

Чем хорош скрипт? Если вы будете для вставки видео из YouTube всегда использовать определенный шаблон, например, <

, то вам никогда не придется подстраивать ширину блога под видео или наоборот - все это можно сделать вставкой или изменением одной строчки в CSS, определяющей ширину контейнера, содержащего код этого видео.

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

4 комментария

  • А можно просто вставлять в пост, в режиме HTML ссылку на видео с ютуба, и оно будет автоматически вставляться. При этом ширина видео будет равна значению, которое указано в админке:

    Параметры->Медиафайлы:
    1. По возможности внедрять медиафайлы по ссылкам прямо на страницу. Например, из ссылок на Flickr или YouTube.
    2. Максимальный размер внедрённого объекта

  • я пользуюсь плагином Smart YouTube. Один раз задать ширину и дальше вставить видео дело нескольких секунд

  • Суть не в том, чтобы задать фиксированную ширину для видео, а в том, чтобы автоматически изменять размеры видео при изменении ширины блога. Это нужно для создания по-настоящему «резиновой» темы.

    • Ширина видео-то изменяется, но только путем обрезки самого видео справа, а не изменения размера всего видео. Разве это решение?

/* ]]> */