Автор: Александр К.

Как вставить видео на сайт — этот вопрос мне довольно часто задают начинающие вебмастера, читатели моего блога. В принципе, задача несложная, если требуется, например, вставить видео youtube на сайт в единичном экземпляре в качестве иллюстрации к какой-либо статье — здесь можно использовать самый простой метод, предлагаемый самим видеохостером: скопировать и прописать сгенерированный код. А если у вас задача вставить 10 — 20 роликов? Или создать видеогалерею? Тут возникают сложности, которые будем решать в данной статье.

Как на сайте разместить видео без плагина

Давайте все-таки сначала разберем самый стандартный способ, который подходит для всех сервисов видеохостингов. Каждый из них предоставляет код, который мы вставляем на страницу для отображения видео. Возьмем за основу YouTube. После загрузки ролика на странице просмотра будет такая кнопка — «Поделиться».

Появляется новая информационная панель, из которой нам нужна кнопка «Сгенерировать HTML код». Нажимаем ее, копируем код и вставляем на страницу сайта. Кроме того, чуть ниже можно задать свой размер отображаемого видео.

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

Как вставить видео на сайт через плагин?

Называется этот плагин, который поможет вставить видео на сайт, Video Embedder. Кроме известного ЮТуба он поддерживает еще несколько популярных сервисов, таких как Vimeo, Google Video, MySpace и других. Скачиваем его, устанавливаем и активируем. Теперь заходим в «Параметры > Video Embedder» и открываем страницу редактирования шоркодов. Суть работы плагина заключается в том, что вы в определенный шорткод, соответствующий одному их видеохостингов, вставляете ID ролика в данном сервисе. Здесь же в настройках можно задать ширину и высоту окна для вставки видео на сайт.

Теперь скопируем шорткод, который нам нужен, например ютубовский, и вставим в текст страницы из редактора

[youtube]video_id[/youtube]

После этого текст «Video_id» заменим на собственно идентификатор. Чуть ниже на странице настроек плагина подробно расписано, как найти его в том или ином сервисе. Я расскажу, как вставить видео youtube на сайт. На странице просмотра ролика адрес страницы выглядит так: «http://www.youtube.com/watch?v=eJG8mGM66d0».

Последний набор символов как раз и есть ID. Копируем его и вставляем между открывающим и закрывающим тегом шорткода.

Как вставить видео youtube на сайт в виде галереи?

Теперь усложним задачу и создадим на блоге полноценную видеогалерею. В этом нам поможет плагин TubePress. Нстроек множество, так что запаситесь терпением, чтобы все досконально изучить.

После установки и активации заходим в «Параметры > TubePress»

В первой вкладке зададим основные параметры для отображения видеогалереи. Можно выбрать как записи от одного конкретного пользователя или его канала, так и по всему ютубу на основе фильтров — самые просматриваемые, лучшие оценки, лидеры обсуждений, недавно добавленные, лидеры обсуждений и т.д. И аналогичные настройки для Vimeo.

Следующая вкладка — «Thumbnails» — для настроек превью и блоков в галерее: количество отображаемых элементов, отображать количество просмотров, размеры миниатюр.

Далее — «Встроенный проигрыватель». Здесь настраиваем непосредственно плейер — цвета, размеры, отображение заголовков и описаний, варианты отображения проигрывателя: в том же окне, в новом окне или с использованием специальных эффектов.

«Показ метаданных» — настраиваем, какие данные о видео будут отображаться.

«Theme» — тут выбирается одна из предустановленных темой оформления видео.

«Feed» — настройка вариантов сортировки клипов в галерее, а также API ключи для YT и Vimeo.

«Кеш» — возможность включить кеширование страниц видеогалереи для уменьшения нагрузки на сервер.

«Дополнительно» — некоторые добавочные настройки, из которых самой нужной является «Ключевое слово для вставки TubePress». по сути это сам шорткод для вставки видео на сайт.

TubePress на практике

С теоретической частью разобрались, переходим к практике. Для вставки единичного видеоролика в статью достаточно лишь прописать такой короткий код:

[tubepress video="J51kfduN5aA"]

Набор символов, как вы уже догадались, это ID ролика. Код одинаково работает как для Youtube, так и для Vimeo.

Для вставки галереи с заданными настройками, добавляем код:

[tubepress name = "value"]

И получаем примерно следующее:

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

Как я говорил, плагинов, чтобы вставить видео на сайт очень много, поэтому предлагаю Вам посмотреть видеоурок, в котором я разберу еще два других плагина, с помощью который вы сможете вставить видео YouTube на сайт — My Youtube Playlist и Smart Youtube.