Как вставить видео с YouTube на сайт в любую статью

Автор: | Рубрика: Блог на Wordpress | Обновлено: 2018-09-27
Просмотров: 4220
Добавляем видео с Youtube на свой сайт

Доброго времени суток, уважаемый посетитель блога ИнетСоветы.ру. Из этой статьи, вы узнаете, как вставить видео на сайт с Ютуба и настроить его отображение и воспроизведение.

Чтобы не занимать место на своем хостинге, удобнее выложить водеоролик на видеохостинг Youtube и разместить на сайте ссылку на видео. Также эти знания вам понадобятся, если вы для дополнения информативности, публикуемого на сайте материала, размещаете видеоролики других авторов.

Что дает публикация мультимедиа в посте

  • улучшение восприятия материала и дополнение информации в текстовом формате;
  • если информация в статье носит обучающий характер, мультимедиа наглядно продемонстрирует весь процесс на практике;
  • увеличение времени нахождения посетителя на сайте, что позитивно сказывается на поведенческих факторах;
  • повышение доверия к автору и улучшение конверсии в виде подписок и продаж;
  • можно получать дополнительный доход от монетизации видеороликов. Подробнее читайте в статье «Как заработать на видео на Youtube».
к оглавлению ↑

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

Способов всего два:

  1. Загрузить файл на хорстинг, где размещен ваш сайт. Дальше подключить видео плеер и показывать медиаролик посетителям. Но у этого метода целых два недостатка. Во-первых, при большом числе одновременных просмотров, создается огромная нагрузка на сервер хостера. Это в свою очередь может привести к тому, что хостер наложит ограничения на сайт или даже временно отключит его, из-за превышения допустимой нагрузки. А во-вторых, видеоролики занимают много места на сервере, а оно тоже ограничено вашим тарифным планом.
  2. Трансляция видео, предварительно загруженного на Ютуб. Ссылка со специальным кодом позволит легко вставить на сайт видео с Youtube. И это не только позволит сэкономить ресурсы сервера, не создавая никакой нагрузки на него, но и позволит привлечь дополнительную аудиторию из популярного видеохостинга.
к оглавлению ↑

Как встроить видео с Youtube на сайт

После того, как рассмотрены способы вставки и их преимущества и недостатки, самое время показать, как добавить видео на сайт с Ютуба.

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

к оглавлению ↑

Как получить html код видео с Youtube

На странице с роликом сразу под видеоплеером найдите кнопку «Поделиться»:

Как разместить на сайте видео с Youtube

Откроется окно с выбором способа отправить ссылку. Для размещения на сайте нас интересует ссылка на видео Youtube в html, и чтобы ее получить нажимаем на кнопку с подписью «Встроить»:

Способы отправить ссылку на ролик на Ютубе в соцсетях и втроить на сайт

После клика по этой кнопке будет показан код для вставки видео с Youtube, выглядит он вот так:

Как получить ссылку с кодом на видео на youtube

Дальше у вас два варианта. Первый - взять и разместить видео на сайте с Ютуба, как есть, ничего не меняя в стандартных настройках кода. Второй – внести правки в код и настроить под себя.

Сначала рассмотрим, какие стандартные настройки нам предлагаются видеохостингом:

  1. Выбрать начало воспроизведения. Ставим птичку в чекбоксе возле надписи «Начало» и вводим время, с которого начинать показ видео. Изменять начало времени воспроизведения стоит, если ролик длинный. Чтобы пользователи не скучали, просматривая ненужный контент, вы им экономите время и сразу предоставляете нужный материал.
  2. Можно отключить показ похожих видео по окончании просмотра.
  3. Не показывать панель управления проигрывателем. Это означает, что пользователь не увидит таких кнопок, как пауза/воспроизведение, полосу прокрутки.
  4. Также можно отключить показ названия ролика и панель действий.
  5. Последняя опция – повышенная конфиденциальность. Это влияет на сбор информации о пользователях, просматривающих ролик.

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

Проделав приведенные выше настройки, вы можете скопировать html-код видео с Youtube, и разместить его в статье на своем сайте.

Если у вас старая версия браузера, чтобы получить html-код, под проигрывателем нажмите «Поделиться», выберите вкладку «HTML-код»:

к оглавлению ↑

Изменение настроек

Дополнительно стоит рассмотреть, какие правки можно внести руками в код для вставки видео на сайт.

  • Автоматическое воспроизведение видео с Youtube на сайте. Если у атрибута autoplay=1 значение 1, то будет происходить автоматический запуск видеоплейера после загрузки страницы. Для отключения установите 0.
  • Для изменения размеров окна проигрывателя укажите нужные размеры у элементов width, height. Первый отвечает за ширину, а второй за высоту. Важно соблюдать пропорции.
к оглавлению ↑

Как вставить код видео с Ютуба в html на платформе WordPress

Для того, чтобы вставить ссылку на видео в Ютубе, в редакторе Вордпресс переключаетесь на вкладку «Текст». Далее, выбираете после какого абзаца будет отображаться проигрыватель с роликом и добавляете туда полученный код:

Как вставить видео из youtube на сайт Вордпресс

По умолчанию проигрыватель будет выровнен по левому краю. Если хотите задать выравнивание по центру, заключите его код в тег <center></center>.

Чтобы посмотреть, как встроилось видео с Youtube на сайте, нажмите на кнопку «Посмотреть изменения» и откроется страница с предварительным просмотром оформленной записи.

к оглавлению ↑

Как вставить видео с Ютуба в ВК

Разместить видео с Ютуба в ВК намного проще, чем на сайте. Весь процесс публикации заключается в нескольких кликах. Нажмите на ссылку «Поделиться» под роликом, откроется следующее окно, где нужно выбрать социальную сеть ВКонтакте:

Как отправить ссылкуа на видео с Ютуба на свою стену в ВК

Если вы уже авторизованы в своему аккаунте в ВК,откроется страничка, где можно указать, как будет размещено видео (на стене или личным сообщением). Вы можете добавить свой комментарий. Если не хотите, чтобы было опубликовано изображение от видеоролика, снимите птичку возле чекбокса «добавить изображение». Также есть возможность добавить ролик в «Мои видеозаписи».

Как поделиться ссылкой на видео в социальной сети ВКонтакте

Схожим образом можно поделиться ссылкой на видео с Ютуба в других социальных сетях. Если вы не нашли ответа на свой вопрос в статье, задайте его в комментариях ниже.

С уважением, Виктория – блог inetsovety.ru

Поделиться ссылкой на пост в соц. сетях
Получать уведомления о новых статьях на e-mail
Комментариев: 28 к статье "Как вставить видео с YouTube на сайт в любую статью"
  • Сергей Грицюк 2015-10-28 в 14:37

    Видео по центру так же можно выровнять в визуальном редакторе или с применением тега div — ссылка на видео

    Ответить
  • Сергей 2015-09-23 в 07:39

    Доброго времени суток, Виктория! Всё понятно и доступно изложено. Но есть такой вопрос. Как отключить плагин, вставив ссылку с ютуба, если статей на блоге уже много и в каждой есть видео? В ручном режиме на это уйдёт не один день.

    Ответить
    • Виктория 2015-09-23 в 19:45

      Доброго времени суток, Сергей!
      Даже и не знаю, как это автоматизировать. Скорее всего руками придется делать.

      Ответить
    • Сергей Грицюк 2015-10-28 в 14:26

      Если ссылка в статье с Ютьюба после отключения плагина не сохранится, то придется заново проставлять их вручную или парсером, если статей очень много.

      Ответить
    • Анатолий 2017-06-28 в 10:45

      После отключения плагина ссылки на видео Ютуб сохранятся. Сергей хочет скопировать эти ссылки в другое место. Парсер скопирует ссылки, а как парсер вставит ссылки?

      Ответить
  • Nik 2015-08-18 в 09:56

    Спасибо, очень помогло!

    Ответить
  • Константин Кислов 2015-03-30 в 22:27

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

    Ответить
    • Сергей Грицюк 2015-10-28 в 14:27

      Сейчас уж достаточно просто ссылку на видео вставить в статью без дополнительных тегов.

      Ответить
  • marihka 2014-06-01 в 15:07

    Виктория, у меня опять вопрос. Ваши советs только для вставки видео на WordPress блог? Или эти рекомендации как то применимы для блогов на Blogger? Спасибо).

    Ответить
    • Виктория 2014-06-02 в 09:58

      Можно вставлять в блоги, которые работают на Blogger, главное условие — добавление кода не в визуальном редакторе, а в html, иначе видео работать не будет.

      Ответить
      • Константин Кислов 2015-03-30 в 22:30

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

        Ответить
      • Сергей Грицюк 2015-10-28 в 14:28

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

        Ответить
  • Александр 2014-05-29 в 08:32

    Одно время сталкивался с проблемой вставки видео на блог, но потом как оказалось проблемы была в том что владелец видео просто запрет поставил на публикации видео. А я перечитал всю информацию о том как вставлять видео на блог. Не знал что здесь у вас есть подробная информация на эту тему.

    Ответить
    • Сергей Грицюк 2015-10-28 в 14:30

      Интересно, по какой причине у некоторых людей с первого раза не получалось вставить видео с Ютьюба на блог на Вордпрессе? Может для вставки видео с других источников требуются ккакие-то дополнительные манипуляции, но в случае с Ютьбом у меня дажи и мысли никогда не возникало ставить какие-то дополнительные плагины.

      Ответить
  • Persya 2013-10-28 в 18:55

    Виктория, в очередной раз прочитала вашу статью. Появился вопрос: загружать на блог с ютуба можно только свои видео или любые по теме. Если второе, не будет ли это плагиатом?

    Ответить
    • Виктория 2013-10-28 в 19:24

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

      Ответить
      • Persya 2013-10-29 в 21:51

        Теперь всё понятно, спасибо. Раньше я думала, что размещать можно только своё видео.

        Ответить
      • Сергей Грицюк 2015-10-28 в 14:32

        А зачем загружать видео с Ютьюба на хостинг? Достаточно просто ссылку на него поставить, чтоб не занимать место.

        Ответить
  • Persya 2013-10-25 в 23:35

    Замечательно, я нашла ответ на свой вопрос. Теперь предстоит научиться снимать качественные видео.

    Ответить
    • Сергей Грицюк 2015-10-28 в 14:33

      Хроший видеокурс по съмке видороликов и скринкастов создал Игорь Лохман. Действительно много полезной информации, особенно, если вообще не представляешь, как этот процесс происходит.

      Ответить
  • Наталья 2013-08-13 в 09:43

    Спасибо большое сегодня попробую!

    Ответить
  • alf2012 2013-05-25 в 21:17

    У меня в визуальном редакторе желтые квадратики видно, но при просмотре неопубликованной статьи — только пустое место под ролик. Сам ролик становится видно уже при публикации статьи 😕

    Ответить
    • Константин Кислов 2015-03-30 в 22:32

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

      Ответить
  • Илья 2013-04-03 в 10:32

    Спасибо за столь качественную написанную статью.Вы мне очень помогли 😉

    Ответить
    • Alexandr 2013-04-13 в 13:33

      Всё пережевано и преподнесено на блюдечке с голубой каёмочкой.
      Спасибо. Доступнее некуда.

      Ответить
  • Юлия Андреевна 2013-03-07 в 18:29

    Виктория, спасибо за статью! Теперь стала добавлять видео из YouTube без загрузки на хостинг, а то очень много места занимало и грузилось чуть дольше. Очень полезная информация для блоггеров.

    Ответить
    • Сергей Грицюк 2015-10-28 в 14:35

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

      Ответить
  • format123 2013-02-13 в 23:14

    Как всегда оченьь полезная информация,
    Спасибо

    Ответить
Оставить комментарий
Нажмите, чтобы отменить ответ.

Комментарий появится после проверки. Комментарии, содержащие спам и ненормативную лексику будут удалены!