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

Добавляем видео с 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 на сайте, нажмите на кнопку «Посмотреть изменения» и откроется страница с предварительным просмотром оформленной записи.

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

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

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

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

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

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

Понравилась статья? Поделиться с друзьями:
Как заработать деньги в интернете
Комментарии: 28
  1. Сергей Грицюк

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

  2. Сергей

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

    1. Виктория (автор)

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

    2. Сергей Грицюк

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

    3. Анатолий

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

  3. Nik

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

  4. Константин Кислов

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

    1. Сергей Грицюк

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

  5. marihka

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

    1. Виктория (автор)

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

      1. Константин Кислов

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

      2. Сергей Грицюк

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

  6. Александр

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

    1. Сергей Грицюк

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

  7. Persya

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

    1. Виктория (автор)

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

      1. Persya

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

      2. Сергей Грицюк

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

  8. Persya

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

    1. Сергей Грицюк

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

  9. Наталья

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

  10. alf2012

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

    1. Константин Кислов

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

  11. Илья

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

    1. Alexandr

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

  12. Юлия Андреевна

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

    1. Сергей Грицюк

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

  13. format123

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

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности. Комментарий появится после проверки. Комментарии, содержащие спам и ненормативную лексику будут удалены!

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.