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

Здравствуйте, уважаемые друзья. Как вставить видео с YouTube на сайт, без плагина? Этот вопрос мне стали задавать после того, как я рассказал о вставке видео в виде галереи на страницах сайта.

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

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

Как создать кнопку «Видео» в редакторе WordPress.

Итак, для упрощения процедуры вставки видео в статьи я использую кнопку «Видео», которую добавил в текстовый редактор WP.

Кнопка "Видео"

Суть заключается в том, что основа кода вставляется по нажатию этой кнопки, остаётся лишь добавить индивидуальный код видео.

А теперь давайте обо всём по порядку.

Внимание: перед работой с файлом functions.php – сделайте его резервную копию.

Для того чтобы кнопка появилась у вас в редакторе, вам необходимо вставить вот этот код в функции темы (functions.php):

/*вставка в редактор кнопки видео*/
add_action('admin_footer', 'eg_quicktags');
function eg_quicktags() {
?>
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
if(typeof(QTags) !== 'undefined') {
QTags.addButton( 'youtube', 'Видео', '<iframe src=\"https://www.youtube.com/embed/\" width=\"850\" height=\"400\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"></iframe>');
}
});
</script>
<?php
}

В каком месте вставлять код.

Для того чтобы ничего не сломать, код необходимо вставлять в самом конце файла. Как правило, последний элемент кода в этом файле – это закрытие php (?>). Если у вас есть такой (?>), значит, вставляйте код кнопки выше его. А ещё лучше удалите его и вставьте код кнопки.

Вставка кода в functions.php
Вставка кода в functions.php

Пояснения по коду.

Оранжевым цветом обозначены те элементы, которые вы меняете под свой сайт. А, точнее, название кнопки, ширину и высоту плеера.

Сохраняем файл и переходим к внедрению видео в статьи.

Как вставить видео с YouTube с помощью кнопки.

Первым делом выбираете видео для вставки на канале YouTube. У каждого видео есть индивидуальный код. Посмотреть его можно в адресной строке браузера. Именно этот код вы выделяете и копируете в буфер обмена (CTRL+C).

Копирование кода видео
Копирование кода видео

Далее, открываете статью на сайте, переводите редактор в режим «Текст», устанавливаете курсор в нужном месте и нажимаете на кнопку «Видео». Теперь устанавливаете курсор, сразу после embed/ вставляете код видео (CTRL+V).

Вставка кода видео
Вставка кода видео

На этом вся процедура вставки видео с YouTube без плагина окончена. Можете сохранять статью и публиковать.

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

И напоследок, для тех, кто не хочет использовать кнопку или у кого сайт создан не на WordPress, есть ещё один простой способ вставить видео с канала Ютуб.

Для этого вам потребуется открыть видео на канале Ютуб. Под видео есть кнопка «Поделиться» — нажимаете на неё – далее, на закладку «HTML–код». Ниже появится код для вставки на сайте.

Ссылка на видео
Ссылка на видео

Вы его копируете и вставляете на сайте. Если нужно изменить размеры окна плеера, то меняете параметры width и height.

Дополнительные настройки плеера.

Если, это необходимо, то вы можете сделать дополнительные настройки плеера. Для этого нужно после индивидуального кода видео поставить знак вопроса (?) и добавить необходимые настройки:

autoplay=1 – автоматический запуск видео.

start=60 – запуск с 60 секунды, это значение задаётся вами.

showinfo=0 – скрыть верхнюю панель.

controls=0 – скрыть нижнюю панель.

modestbranding=1 – скрыть логотип YouTube.

Первый параметр идёт после знака вопрос (?), а все последующие прибавляются через амперсанд (&). И выглядеть такой код будет примерно так:

<iframe width="560" height="315" src="https://www.youtube.com/embed/_jt5B21Tjf4?autoplay=1&start=60" frameborder="0" allowfullscreen></iframe>

Вот такими простыми способами можно вставлять видео в статьи на сайтах и блогах.

А теперь предлагаю вашему вниманию видео по вышеописанным способам, которое тоже вставлено без плагина, но с помощью кнопки «Видео».

На этом у меня сегодня всё. Я желаю вам успехов и хорошего настроения. До встречи в новых статьях и видеоуроках.

P.S. если, вы ещё не создаёте видеоуроки, не размещаете их на Ютубе и не зарабатываете на них, я советую изучить мастер-класс «YouTube Специалист» Александра Новикова. Где вы получите знания и умения и начнёте зарабатывать вместе с YouTube.

С уважением, Максим Зайцев.

Понравилась статья? Поделиться с друзьями:
Комментарии: 16
  1. Олег

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

    1. Максим Зайцев (автор)

      Олег, добрый день. Если шаблон адаптирован под мобильные устройства, значит и с видео проблем не будет. Это решается через медиазапросы и стили CSS.

      1. Олег

        Попробую без плагина. Спасибо, Максим.

        1. Максим Зайцев (автор)

          Олег, желаю удачи!

  2. Иван

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

    1. Максим Зайцев (автор)

      С ростом популярности видео контента — этот вопрос становится более актуальным. Я уже и не представляю свой блог без видеоуроков. А ведь ещё год назад, я реально стеснялся записывать видео. Мне мой голос казался таким ужасным. Но, благодаря моим зрителям и читателям, я понял, что не всё так плохо. ;-) Вот и стараюсь записывать уроки к каждой статье.
      А вставляю уроки описанным в статье способом.

      1. Иван

        Максим, ты не один такой, я тоже из стеснительных. Пробовал, да что-то не решился, вот куплю качественный микрофон, тогда и поговорим. А сейчас пока не готов, да и времени отнимает много — может это глупо звучит, но я не умею разговаривать с «воображаемыми» читателями. Несомненно будущее за видео, да я и сам понимаю, может в 2016? Я вот, например, так до конца и не понял как делать баннер с помощью твоего урока, но я просмотрел лишь текстовый вариант! В видео формате несомненно всё станет для меня понятно, уж я то понимаю, когда делаешь крупные статьи на блоге, да ещё и нужно всё подробно объяснить: несомненно, что-то будет не понятно человеку, в таком случае и выручает исключительно видео-формат. Везде сейчас видео, гораздо проще вбить в ютуб нужный вопрос и получить ответ, нежели читать тонны букв.

        1. Максим Зайцев (автор)

          Вань, по своему опыту могу сказать, что нужно просто брать и делать. Всем абсолютно не угодить. У меня были комментарии на канале и на блоге, где некие субъекты высказывали своё негативное мнение. То им слово не так произношу, то ещё что-то. Критики я не боюсь. Если она объективна, стараюсь исправить «косяки» со своей стороны. Но, а если замечание безосновательны, то я прошу человека показать, как нужно, и на этом всё прекращается.
          Видео — это уже не будущее, это настоящее. Никто не хочет терять время и все стараются получить результат максимально быстро. А видео это лучший формат получения информации.

  3. Александр

    Здравствуйте!
    …написано логично!
    Вот только новичку будет ещё полезно сгонять «в исходник» и взглянуть на код своей страницы: к примеру —
    frameborder=»0″ — это устаревший атрибут — «напрягает» HTML-валидатор.
    И что же с этим бедом делать!?
    Кстати, многие плагины (добавления видео) тоже засоряют код (это фигня) но знать трэбо)

    1. Максим Зайцев (автор)

      Здравствуйте, Александр. Согласен frameborder="0" напрягает валидатор, и в принципе, — это ни на что не влияет. Но, его всегда можно заменить на border: none; в стилях. И вы это прекрасно знаете. Спасибо за дополнение, уверен оно будет интересно читателям моего блога. Удачи вам!

      1. Александр

        Да!!
        …вот моё упущение… обошёлся неучтиво в комме.
        Конечно же удачи и Вам.

        1. Максим Зайцев (автор)

          ;-) Спасибо, Александр. И вам удачи!

  4. Александр

    Здравствуйте! Подскажите, пожалуйста, можно ли сделать галерею из html-кодов? Хотелось бы скрыть всё лишнее из каждого видео (логотип youtube, панели).

    1. Максим Зайцев (автор)

      Здравствуйте, Александр. Простенькое подобие галереи можно сделать на чистом html (без подключения скриптов). А убрать всё лишнее из видео можно через параметры.

  5. Олег

    И вот про это хотелось бы подробней . В моём случае требуется вставить видео с ютуб на Wix сайт )

    1. Максим Зайцев (автор)

      Олег, самый быстрый и простой способ — через фрейм. Читайте в статье раздел «Как вставить видео без кнопки и без плагина».

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