Андрей Смирнов
Время чтения: ~11 мин.
Просмотров: 0

Как получить HTML-код для вставки на сайт видео с YouTube

Содержание

Подробности
Родительская категория: Google
Категория: YouTube
319.jpg

Видео с YouTube вовсе не обязательно просматривать только на сайтеwww.YouTube.com. Наверняка приходилось встречать ролики, расположенные на видео-хостинге YouTube, которые вставлены в посты в социальных сетях или на чьи-нибудь сайтах. В этой статье подробно рассмотрим, где и как взять HTML-код для того, чтобы вставить себе на сайт своё (или понравившееся) видео с YouTube.

Как узнать адрес YouTube видео, расположенного на сайте

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

0004.jpg

Ссылки «Поделиться» ролика с YouTube

Клик по хитровывернутой стрелки приведёт к тому, что в окне видео-плеера YouTube поверх самого видео появится слой «Поделиться» с прямой ссылкой на видео. Но нам нужна не ссылка на видео, нам нужен HTML-код для вставки этого видео на сайт. Поэтому двигаемся дальше и кликаем по кнопке ...:

0005.jpg

HTML-код для вставки на сайт видео с YouTube

Ура-ура! В новой вкладке откроется собственно страница с видео на сайте YouTube. А это нам и нужно. Смотрим на то, что расположено ниже видео и делаем следующее:

  1. Находим ссылку «Поделиться» (уже со знакомой нам хитровывернутой стрелкой), кликаем по ней!
  2. В выпавшем меню, находим ссылку «HTML-код».

0006.jpg

В общем-то всё!

Во вкладке «HTML-код», найденной выше будет то, что мы искали:

<iframe>

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

Также есть расширенные настройки во вкладке YouTube «HTML-код», но это тоже отдельная тема.

P.S. обновлённая статья «Ссылка на видео и HTML-код для вставки видео на сайт c YouTube»

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Обсудить эту статью

Войдите, чтобы комментировать

Тема на форуме: Как получить HTML-код для вставки на сайт видео с YouTube
Подробнее…

Обсудить эту статью

INFO: Вы отправляете сообщение как ‘Гость’
  • Вы здесь:  
  • Главнаяarrow.png
  • Внешние сервисыarrow.png
  • Googlearrow.png
  • YouTubearrow.png
  • Как получить HTML-код для вставки на сайт видео с YouTube

1. Отправка ссылки на любую часть видео

Когда вы копируете ссылку на видео с YouTube и отправляете её другу, ролик начинается сначала. Если же вам надо показать только определённый отрезок, добавьте небольшую метку в URL-адрес. Это можно сделать тремя способами.

1. Написать нужный тайм-код самостоятельно. Для этого в конце URL-адреса видео требуется добавить &t=YmXXs, где Y — минуты, а XX — секунды. Использовать обе переменные необязательно.

Обычный адрес видео С тайм-кодом
youtube.com/watch?v=a1sWMRaEahg youtube.com/watch?v=a1sWMRaEahg&t=7m42s

2. В конце URL-адреса ввести &start=30, где 30 — количество секунд, которые надо пропустить.

Обычный адрес видео С тайм-кодом
youtube.com/watch?v=AKEpNl9A3JA youtube.com/watch?v=AKEpNl9A3JA&start=320

3. Открыть видео, нажать на кнопку «Поделиться» и поставить галочку на «Начало». Появится ссылка на видео с меткой в том месте, где вы закончили просмотр.

1_1548310655.jpg

2. Создание зацикленного видео

На YouTube очень много клипов и различных саундтреков. Если вы вдруг наткнулись на какую-то песню и хотите её переслушивать снова и снова, необязательно искать 10-часовую версию. Чтобы зациклить видео, достаточно написать youtuberepeater.com в начале URL вместо youtube.com.

Обычный адрес видео Адрес зацикленного видео
youtube.com/watch?v=QHRuTYtSbJQ youtuberepeater.com/watch?v=QHRuTYtSbJQ

3. Обход возрастных ограничений

2_1548318972.jpg

YouTube иногда ставит возрастные ограничения на видео. Такие ролики блокируются для несовершеннолетних и тех, у кого нет учётной записи. Чтобы обойти этот запрет, нужно в начале URL заменить youtube.com на genyoutube.com. Видео откроется в новой вкладке без возрастных ограничений.

Обычный адрес видео Без возрастных ограничений
youtube.com/watch?v=wvZ6nB3cl1w genyoutube.com/watch?v=wvZ6nB3cl1w

4. Скачивание видео

Если вам нужно скачать видео, то сделать это можно с помощью URL-адреса. Введите в начале строки pwn или ss. Откроется сервис, позволяющий скачать видео в любом доступном формате.

Обычный адрес видео Ссылка для скачивания
youtube.com/watch?v=ncEb_U7JNss pwnyoutube.com/watch?v=ncEb_U7JNss

Будьте внимательны — не перезаливайте ролики, защищённые копирайтом. Вам могут дать страйк и запретить проводить трансляции или загружать видео.

5. Сохранение картинки из любого видео

Довольно часто Google в поиске по картинкам выдаёт изображения с YouTube. Обычно они называются maxresdefault и выполняют роль обложки.

Вы можете посмотреть и скачать любое превью, если для видео оно установлено. Для этого нужно немного модифицировать URL-адрес: img.youtube.com/vi/[VideoID]/maxresdefault.jpg. VideoID — это адрес видео, который можно найти в URL после ?v=.

Обычный адрес видео Ссылка на картинку
youtube.com/watch?v=JeWOAsXHjHM img.youtube.com/vi/JeWOAsXHjHM/maxresdefault.jpg

6. Создание гифки из видео

4_1548320286.jpg

В видео на YouTube частенько встречаются мемные моменты. Вы можете легко сделать из них гифку и отправить другу в мессенджере.

Для этого в URL нужно поменять youtube.com на gifyoutube.com. Вы попадёте на сайт Gifs, где можно выбрать начало и конец будущей гифки, добавить эффекты и скачать её. Отметим, что с видео длительностью больше трёх часов трюк может не сработать.

Обычный адрес видео Редактор гифок
youtube.com/watch?v=J0dGoFsO_j4 gifyoutube.com/watch?v=J0dGoFsO_j4

7. Переход в YouTube TV

YouTube TV — интерфейс, разработанный для телевизоров и приложений на консолях. Использовать его на компьютере не очень удобно, так как он предназначен для управления через пульт или геймпад. Однако он может пригодиться, если вам интересно посмотреть что-то новое.

5_1548320446.jpg

По ссылке youtube.com/tv вас попросят войти в аккаунт и ввести код. Затем доступ к телевизионному интерфейсу YouTube будет открыт.

Главная » Как создать и настроить сайт » Социальные сети » — HTML, CSS, PHP и т.д. » Как вставить видео с Youtube на свой сайт и настроить дополнительные функции проигрывателя

Приветствую друзья. Сегодня я расскажу, как вставлять видео с Youtube на свой сайт. Честного говоря, я считал, что публиковать ролики на своих страницах умеет каждый начинающий вебмастер, ведь сложного в этом ничего нет. Но, на нескольких форумах я встретил такой вопрос, а затем вспомнил, что, в начале своей вебмастерской карьеры забил все 2 гигабайта своего хостинга видео файлами, вместо того, чтобы выкладывать их в Ютуб и вставлять на блог уже оттуда (не знал я, что так можно).

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

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

Для чего вставлять видео на сайт

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

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

1. Улучшение поведенческих факторов

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

2. Увеличение конверсии

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

3. Дополнительная аудитория

Все мы воспринимаем информацию по разному, кто-то предпочитает текст, а кто-то отдает свое предпочтение видео контенту. Если мы используем на своем сайте разные варианты подачи информации, то привлекаем к нему и первых и вторых.

Как можно вставить видео на сайт

Существует два способа вставить на сайт свое видео.

  • Выложить файл с роликом на свой хостинг, подключить видео плеер и транслировать кадры прямо со своего сервера. Для обычного сайта этот вариант не самый лучший, так как такие файлы занимают много места (десятки и сотни мегабайт), а их трансляция одновременно большому числу зрителей создаст вашему серверу немалую нагрузку.
  • Разместить клип на видео хостинге (Youtube, Rutube), а для трансляции на страницах, использовать специальный код. В таком варианте все нагрузки ложатся на сервера видео хостинга, вы экономите место и снижаете нагрузку на сервер. Кроме того, Ютуб имеет огромную аудиторию и это дополнительный канал продвижения.

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

Итак, со способами вставки мы определились, теперь давайте перейдем к конкретной инструкции.

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

1. Стандартные настройки кода

Первым делом открываем страницу того ролика, который будем вставлять.

Под каждым видео есть блок с настройками и описанием. В этом блоке необходимо найти ссылку «Поделиться» и нажать на нее. В раскрывшейся панели переключаемся на HTML код.

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

Как правило, требуется корректировка размеров, встраиваемого видео. Для этого нажимаем на ссылку «Ещё», которая открывает дополнительную панель.

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

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

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

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

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

Автоматическое воспроизведение видео с Youtube

Включить или отключить автоматическое воспроизведение видео на Youtube можно с помощью элемента «&autoplay=». Если после знака равно стоит 1, то видео будет автоматически запускаться, если такого элемента нет или он равен 0, то автозапуска не будет. Добавляется элемент таким образом:

Запуск видео с определенного момента

Можно настроить проигрыватель таким образом, чтобы ваш ролик запускался не с начала, а с указанной заранее секунды. Для этого добавляется «#t=». После знака равенства указывается время (отдельно минуты, отдельно секунды). Выглядеть будет вот так:

Добавление субтитров

Русские субтитры включаются следующим кодом «&cc_lang_pref=ru&cc_load_policy=1». В инструкции от Youtube говорится, что язык субтитров переключается с помощью значения cc_lang_pref. RU означает русские, но мой эксперимент показал, что и при FR (французский) все равно показываются русские субтитры. Код выглядит вот так:

Когда код полностью готов, переходим к его вставке на страницу.

3. Как вставить код видео с Youtube на HTML сайт

Для установки открываете HTML файл вашего сайта в текстовом редакторе (notepad+, akelpad или др.). Находите в коде место, где должно выводиться видео и добавляете, полученный ранее, код. После сохранения на вашей странице появится проигрыватель с теми настройками, которые вы сделали.

Нашел специально страницу, которую делал давно на HTML со встроенным видео, вот как там выглядит такой код:

4. Установка кода с Ютуб на WordPress

Процедура вставки кода на WordPress ничем не отличается, разве что делается все проще. Не нужны текстовые редакторы.

Для вставки видео в статью открываете встроенный редактор WordPress, переключаете его в режим «Текст». Находите нужное место в статье и вставляете туда код проигрывателя. Сохраняете и все работает.

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

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

5. Как вставить видео на Ucoz, Blogspot, Livejournal

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

Как поменять размер видео в готовом коде

Если размер видео, который у вас получился после настройки кода не подошел к вашему сайту (например, вы сменили дизайн и ширина сайдбара у вас уменьшилась) не обязательно идти в Youtube и делать новый код. Можно вручную поменять цифры, отвечающие за ширину и высоту проигрывателя (width=”560″ height=”315″), только пропорции подберите подходящие.

Точно также вы можете руками поправить все характеристики плеера, описанные выше.

Статьи из этой же рубрики:

Рейтинг автора
5
Подборку подготовил
Илья Коновалов
Программист и опытный пользователь интернета
Написано статей
179
Ссылка на основную публикацию
Похожие публикации