Как вставить видео на сайт с YouTube
19 Май, 2012 
Комментариев 43
В этом пошаговом уроке я покажу, как вставить видео на сайт с YouTube. Почему именно с него? Да потому что на сегодняшний день это самый популярный видеохостинг, который занимает 3 место по посещаемости среди всех сайтов в мире. Здесь Вы можете найти готовые видеоролики на любую тему и затем добавить видео на страницу своего блога.
При желании, можно сделать свой ролик, загрузить его на сервис и затем точно также встроить видео с YouTube на свой сайт или блог. Причем все это совершенно бесплатно. Потребуется только зарегистрироваться на видеохостинге, если у Вас еще нет аккаунта в Google и создать свой канал. Но об этом как-нибудь в другой раз.
Зачем вообще добавлять видео на сайт? Думаю, все уже заметили, что почти все популярные блоггеры часто вставляют видео с YouTube или других сервисов в конце своих статей. Причем часто эти ролики носят развлекательный характер и не имеют прямого отношения к теме поста. Так зачем же тогда? Все очень просто:
- Во-первых, использование разных видов контента (текст, картинки, графики, видео) делает блог интереснее для посетителя.
- Во-вторых, таким способом нас “заставляют” оставаться на странице блога подольше, тем самым улучшая поведенческие факторы на своем сайте.
Кое-что о влиянии поведенческих факторов на результаты поисковой выдачи я писал здесь. Прочитайте эту статью обязательно.
Так как я веду свой блог на движке WordPress, то дальнейшие действия покажу на примере именно этой CMS. Думаю, в других случаях все происходит аналогично.
Для вставки видео на блог WordPress с различных видеохостингов существует множество плагинов. Но, если можно обойтись без них, то лучше так и сделать. Ведь каждый новый плагин, это лишняя нагрузка на сервер. А для поисковых роботов скорость загрузки сайта имеет огромное значение. Поэтому сделаем вставку видео YouTube на сайт Вордпресс без плагинов. Тем более что это совсем не сложно. Итак, приступим.
Как вставить видео с YouTube на сайт WordPress
Для начала переходим на сайт www.youtube.com и выбираем видеоролик, который установим на свой блог. Под ним будет несколько кнопок. Нажимаем сначала “Поделиться“, а на открывшейся вкладке жмем “Сгенерировать HTML-код“.
Внимание! Обязательно для блогов на Вордпресс устанавливаем галочку “Использовать старый код встраивания“. Если этого не сделать, то код встраивания будет начинаться с тега , с которым WordPress работает не корректно. В этом случае, если после вставки кода в режиме HTML, Вам понадобиться перейти в визуальный редактор, код будет нарушен и его придется вставлять и сохранять снова в режиме HTML.
Обычно я устанавливаю галочку “Показать похожие видео после завершения просмотра“, хотя это не обязательно. Многие боятся, что посетитель перейдет на сайт сервиса для просмотра других роликов. Пункты “Использовать HTTPS” и “Включить режим повышенной конфиденциальности” я не отмечаю.
Далее выбираем размер, с которым будем вставлять видео на страницу сайта. Можно выбрать один из стандартных размеров или установить свой, введя нужные значения в соответствующие поля.
После всех настроек копируем код для встраивания видео с Ютуба на сайт в буфер обмена.
Вставка видео YouTube на сайт Вордпресс в статью
Открываем редактор WordPress в режиме HTML и вставляем код видео с Ютуба в нужное место. По умолчанию плеер будет выровнен по левому краю. Чтобы его красиво установить по центру статьи, заключаем полученный код в тег
Нажимаем кнопку “Обновить” и переходим на страницу блога, чтобы посмотреть результат.
Как добавить видео на сайт в сайдбар
Кроме вставки видео в статью, можно точно также установить его в сайдбар.
Открываем в админке блога вкладку “Внешний вид” – “Виджеты“. Выбираем слева виджет “Текст” и перетаскиваем его направо в нужный сайдбар. В зависимости от шаблона у Вас может быть возможность вставить видео на сайт не только в боковые сайдбары, но и в Footer.
Внимание! Копируя код видео на сайте www.youtube.com для вставки в сайдбар, не забудьте уменьшить размер плеера.
Например, для своего блога blogibiznes.ru я устанавливаю ширину 260 px, а высота 162 px определяется автоматически. Если вы хотите изменить пропорции картинки, то можно прописать требуемые значения width и height вручную прямо в коде. Обратите внимание, что сделать это надо в двух местах.
Ну, вот и все дела. Конечно, тут все очень просто, но по себе знаю, что иногда новичков это ставит в тупик. Многие устанавливают плагины, нагружая свой блог. А зачем, если можно легко обойтись без них?
Надеюсь теперь понятно, как вставить видео с YouTube на сайт или блог WordPress. Кстати, подобным образом, можно добавить видео не только с сайта www.youtube.com, но и с других подобных сервисов. Например, с rutube.ru.
Вставляем видео с YouTube на сайты Google
Сам я не пользуюсь бесплатными сайтами Google, но вот у одного из читателей возникла проблема с встраиванием кода видео. Дело в том, что старый код встраивания не корректно отображался в разных браузерах, а новый код через iframe вставлялся нормально, но нельзя было изменить размер плеера.
Ответ в комментариях дал другой читатель под ником kaktus, за что ему отдельное спасибо, а я решил добавить его в статью, так как комментарии не все читают.
Итак, чтобы была возможность изменять размер видео при вставке кода на сайты Google и вообще не было проблем, надо перед копированием кода установить галочку “Использовать HTTPS” (смотрите рисунок выше). Просто Гугл использует на своих сайтах передачу данных с шифрованием по протоколу HTTPS. Вот так все просто оказывается.
Существует еще возможность установки видео на блог, загружая видеофайл прямо на свой хостинг. В этом случае у Вас будет возможность настраивать внешний вид плеера на свой вкус, создавать плейлисты и др. Например, можно воспользоваться услугами конструктора плееров на сайте uppod.ru. Еще один плюс этого метода в том, что Вы избавитесь от назойливой рекламы видеохостингов. Но есть и существенный минус – файлы могут быть больших размеров, а Ваш хостинг все-таки не резиновый.
Какой способ выбрать для установки видеороликов на блог, решать Вам. Я лично использую для этого сервис Ютуб. И не только потому, что это просто. Раскрутка сайта с помощью видео на YouTube – это бесплатный и эффективный способ. Но это тема отдельной статьи и не одной. Подписывайтесь на обновления блога, чтобы не пропустить. До встречи!
Понравилась статья? Нажимай на кнопки:
Очень интересная информация для меня, как новичка.
Это как раз то, что мне нужно!
Добавлю ваш сайт в закладки!
Спасибо, очень интересно!
Олег, спасибо большое за такой полезный пост! Я так давно хотела научиться вставлять видео на блоге. И вот, наконец-то получилось! Причем быстро и без проблем. Ура!!!
Елена, рад видеть и рад, если помог!
Спасибо! Очень полезная и нужная статья! Обязательно воспользуюсь – особенно понравилось – можно вставить видео в сайдбар!
Такой существенный недостаток, закачки видео себе на хостинг, как то, что он не резиновый, перевешивает, перевешивает все плюсы его настроек внешнего вида видео. Лучше вставлять кодом.
Видео на сайт ставить необходимо. Потому что люди разные – одни любят читать, другие любят смотреть видео.
А Вы случайно не знаете, как вставлять видео в резиновую тему? Премного благодарен.
Думаю, точно так же, как и в обычную. Просто надо подобрать подходящий размер, чтобы он не был больше, чем надо.
Спасибо! Как всегда, всё очень просто, доступно и доходчиво!!! Удачи.
Хотелось бы узнать, как лучше? Использовать плагин для видео или таким вот способом вставлять видео?!
Главное результат. Если его можно легко добиться без плагина, зачем создавать лишнюю нагрузку на блог.
С помощью вашего сайта узнала, как вставлять видео с ютуба. Я стараюсь пользоваться плагинами только по мере необходимости, поэтому вставляла код без плагинов. От себя дополню, я этот код поместила в контейнер див, ну чтобы выровнять относительно дизайна сайта.
Можно и так, это даже вернее. Хотя я просто использую тег center.
А что, если нет графы “Использовать старый код встраивания“, и галочку, соответственно, поставить некуда?? С этим кодом ничего не получается, в записи плеера нету и видео не видно, подскажите, что можно сделать, пожалуйста…
Все, можете не отвечать, решение нашел =)
Не отвечаю :-).
Поделитесь на будущее для всех, пожалуйста! Мне пришлось качать файл с ютуба и перезаливать его.
Секрет, с YouTube нормально копируется HTML-код ролика и вставляется на сайт без проблем. Что конкретно не получается?
Спасибо за доходчивую статью. Уже сразу и сделал. А то не влазило видео в тему.
Олег, спасибо, а я думаю, почему у меня не всегда корректо работает видео на сайте – не знала, что нужно использовать старый код.
А от индексации не нужно прятать код?
Нет, не нужно. Поисковики прекрасно понимают, что это код с YouTube и нормально его воспринимают.
Только на этом сайте нашел то что искал) Скажите, а в чем разница, если скопировать просто ссылку на видео из браузера, либо генерировать специально код?
Точно не помню, но по-моему можно вставить просто ссылку в режиме визуального редактора. Или с помощью плагинов. Если вставлять через HTML-редактор, то только кодом, причем лучше использовать старый код встраивания.
А вообще попробуйте разные способы и выберите лучший. Я делаю с помощью кода.
Спасибо. Раз и навсегда понятно)
Здравствуйте, Олег. Не могу понять что не так делаю. Добавил видео, сгенерировал старый код, добавил куда надо, а видео не отображается, хотя когда через iframe все работает отлично, только размер подобрать нельзя.
sites.google.com/site/sgtgorlovka/fotoalbom1
Я писал про WordPress, там новый код может пропадать. Используйте тот, который работает. А размер можно на странице Ютуб менять. Почему не получается подобрать?
Все верно, на странице Ютуб размер менять можно. Но при добавлении старого кода на сайт указываемый размер применяется (устанавливаю: 240х180). Для нового кода тоже устанавливаю размер на Ютуб 240х180, но при добавлении на сайт, после сохранения редактируемой станицы, он меняется на 425х355.
По поводу старого кода такая ситуация: в Опере видео отображается отлично, а вот в Хроме и ФФ нет.
Может надо какие-то настройки в редакторе сайта поменять. Ответа так и не нашел!
Спасибо.
Попробовал вставить Ваш код на сайт WordPress, все нормально получилось. Смотрел в Хроме. Это, видимо, у Вас сайт не воспринимает правильно такие коды или с отображением в браузерах проблемы.
Спасибо, Олег. Буду искать проблему у себя на сайте.
Вячеслав, дело в том, что на Сайтах Google используется протокол https, поэтому для вставки видео из YouTube с возможностью изменения размера, при генерации html-кода на YouTube нужно выставить галочки “Использовать старый код встраивания” и “Использовать HTTPS”.
Спасибо за совет! Я вот этого не знал, так как не пользуюсь сайтами Google и проблем не было.
Добавил эту информацию в статью.
Спасибо за все советы, очень хорошо расписана информация по поводу добавления видео.
И в комментариях также не меньше полезных советов.
Спасибо всем.
Действительно, все просто. А видео с Ютуба просто необходимо размещать на сайте, чтобы привлечь клиентов, и раскрутить свое видео.
У меня в WordPress (версия 3.5.1) не получилось вставить видео с Ютуба через код. После того, как публикуешь пост в нем видна абракадабра HTML кода, а не картинка с видео. Пришлось ставить плагин… Что я сделал не так?
Сложно сказать, у меня на 3.5.1 нормально вставляется, причем на разных шаблонах. На всякий случай, вставлять надо в режиме HTML, используя старый код встраивания.
Отлично, спасибо! А то голову сломал, как видео выровнять по центру: все элементарно, старый код + класс!
Спасибо огромное за понятную пошаговую инструкцию! Все получилось с первой попытки и без проблем!!! Даже не могла предположить, что процесс добавления видео с YOUTUBE на сайт может оказаться таким несложным!
Конечно, это просто, хотя у многих с первого раза не получается.
Старые коды не поддерживаются на YuoTube уже ..
Поэтому попробовали вот так:
_http://drcomp.su/voprosi_i_otveti/kak_zalit_na_sayt_ne_podderzhivayushchiy_novie_kodi_video_s_youtube.html
Почему HTML код видео на сайт меняется на ссылку (Открыть flash-объект в новом окне!)
Ни разу при вставке кода с YouTube такой ссылки у меня не появлялось, поэтому не знаю почему у Вас так. Может какие-то проблемы с flash плеером?
Отличная статья. Действительно, если руки растут из нужного места, то лучше обойтись без плагинов.
Друзья! Заходите на мой “молодой” блог. Помогите в продвижении. Ведь каждый начинал с малого…
Желаю всем мира и добра.