Содержание
- 1 Как узнать адрес YouTube видео, расположенного на сайте
- 2 Ссылки «Поделиться» ролика с YouTube
- 3 HTML-код для вставки на сайт видео с YouTube
- 4 В общем-то всё!
- 5 Заберите ссылку на статью к себе, чтобы потом легко её найти 😉
- 6 1. Отправка ссылки на любую часть видео
- 7 2. Создание зацикленного видео
- 8 3. Обход возрастных ограничений
- 9 4. Скачивание видео
- 10 5. Сохранение картинки из любого видео
- 11 6. Создание гифки из видео
- 12 7. Переход в YouTube TV
- 13 Для чего вставлять видео на сайт
- 14 Как можно вставить видео на сайт
- 15 Как вставить видео с Ютуба на сайт
- 16 Как поменять размер видео в готовом коде
- Подробности
- Родительская категория: Google
- Категория: YouTube
Видео с YouTube вовсе не обязательно просматривать только на сайтеwww.YouTube.com. Наверняка приходилось встречать ролики, расположенные на видео-хостинге YouTube, которые вставлены в посты в социальных сетях или на чьи-нибудь сайтах. В этой статье подробно рассмотрим, где и как взять HTML-код для того, чтобы вставить себе на сайт своё (или понравившееся) видео с YouTube.
Как узнать адрес YouTube видео, расположенного на сайте
Посмотрим на примере обычного видео, расположенного на сайте, как узнать его HTML-код для вставки на свой сайт. Для этого внимательно приглядимся к всплывающей информации на видео при наведении мышки. В правом верхнем углу видео находится хитровывернутая стрелка. Она то нам и нужна! Кликаем по ней!
Ссылки «Поделиться» ролика с YouTube
Клик по хитровывернутой стрелки приведёт к тому, что в окне видео-плеера YouTube поверх самого видео появится слой «Поделиться» с прямой ссылкой на видео. Но нам нужна не ссылка на видео, нам нужен HTML-код для вставки этого видео на сайт. Поэтому двигаемся дальше и кликаем по кнопке ...
:
HTML-код для вставки на сайт видео с YouTube
Ура-ура! В новой вкладке откроется собственно страница с видео на сайте YouTube. А это нам и нужно. Смотрим на то, что расположено ниже видео и делаем следующее:
- Находим ссылку «Поделиться» (уже со знакомой нам хитровывернутой стрелкой), кликаем по ней!
- В выпавшем меню, находим ссылку «HTML-код».
В общем-то всё!
Во вкладке «HTML-код», найденной выше будет то, что мы искали:
<iframe>
Этот код можно скопировать и попытаться вставить к себе на сайт. С этим могут быть проблемы, так как тег может быть запрещён, но это тема для другой статьи.
Также есть расширенные настройки во вкладке YouTube «HTML-код», но это тоже отдельная тема.
P.S. обновлённая статья «Ссылка на видео и HTML-код для вставки видео на сайт c YouTube»
Заберите ссылку на статью к себе, чтобы потом легко её найти 😉
Выберите, то, чем пользуетесь чаще всего:
Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )
Войдите, чтобы комментировать
Обсудить эту статью
- Вы здесь:
-
Главная
-
Внешние сервисы
-
Google
-
YouTube
- Как получить 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. Открыть видео, нажать на кнопку «Поделиться» и поставить галочку на «Начало». Появится ссылка на видео с меткой в том месте, где вы закончили просмотр.
2. Создание зацикленного видео
На YouTube очень много клипов и различных саундтреков. Если вы вдруг наткнулись на какую-то песню и хотите её переслушивать снова и снова, необязательно искать 10-часовую версию. Чтобы зациклить видео, достаточно написать youtuberepeater.com в начале URL вместо youtube.com.
Обычный адрес видео | Адрес зацикленного видео |
youtube.com/watch?v=QHRuTYtSbJQ | youtuberepeater.com/watch?v=QHRuTYtSbJQ |
3. Обход возрастных ограничений
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. Создание гифки из видео
В видео на YouTube частенько встречаются мемные моменты. Вы можете легко сделать из них гифку и отправить другу в мессенджере.
Для этого в URL нужно поменять youtube.com на gifyoutube.com. Вы попадёте на сайт Gifs, где можно выбрать начало и конец будущей гифки, добавить эффекты и скачать её. Отметим, что с видео длительностью больше трёх часов трюк может не сработать.
Обычный адрес видео | Редактор гифок |
youtube.com/watch?v=J0dGoFsO_j4 | gifyoutube.com/watch?v=J0dGoFsO_j4 |
7. Переход в YouTube TV
YouTube TV — интерфейс, разработанный для телевизоров и приложений на консолях. Использовать его на компьютере не очень удобно, так как он предназначен для управления через пульт или геймпад. Однако он может пригодиться, если вам интересно посмотреть что-то новое.
По ссылке youtube.com/tv вас попросят войти в аккаунт и ввести код. Затем доступ к телевизионному интерфейсу 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″), только пропорции подберите подходящие.
Точно также вы можете руками поправить все характеристики плеера, описанные выше.
Статьи из этой же рубрики:
- https://mb4.ru/web-services/google/youtube/319-html-code-video-youtube.html
- https://lifehacker.ru/xitrosti-s-youtube/
- https://biznessystem.ru/kak-vstavit-video-s-youtube-na-sajt/