Официальный RSS Youtube - как запускать видео на сайте
Еще один способ для запуска видео с ваших каналов и из плейлистов на своем сайте. На этот раз через официальный RSS самого сервиса Youtube.com
Так как официальный RSS Ютуба не отдает картинку ролика, то мы ее будем получать через JS на основе Youtube-id.
Для начала разберем каким образом формируется RSS лента на стороне Youtube.
Хорошая статья на данную тему тут
https://www.youtube.com/feeds/videos.xml?channel_id=CHANNELID (по ID канала)
https://www.youtube.com/feeds/videos.xml?user=USERNAME (по имени пользователя, например, GoogleRU)
https://www.youtube.com/feeds/videos.xml?playlist_id=YOUR_YOUTUBE_PLAYLIST_NUMBER (по плейлисту)
Например канал нашего сайта https://www.youtube.com/channel/UCybVpDaD1_ZoiuE1DxXuVYQ
Его ID будет UCybVpDaD1_ZoiuE1DxXuVYQ
Следовательно прямая ссылка на RSS https://www.youtube.com/feeds/videos.xml?channel_id=UCybVpDaD1_ZoiuE1DxXuVYQ
Клик по такой ссылке в веб-браузере Vivaldi сразу открывает фид
Пример с плейлистом:
https://www.youtube.com/playlist?list=PLnYo4U2SnJWNolxS8Y-5xjpnmpoPHT8oR
Где PLnYo4U2SnJWNolxS8Y-5xjpnmpoPHT8oR id плейлиста
Следовательно RSS для плейлиста будет https://www.youtube.com/feeds/videos.xml?playlist_id=PLnYo4U2SnJWNolxS8Y-5xjpnmpoPHT8oR
Все тут хорошо, кроме того, что нет обложек у роликов.
И вот именно их мы и будем вытягивать из ссылок на страницу ролика.
Код RSS информера informer.tpl для самых нетерпеливых
<a href="{link}" class="bla-1 mb-3 text-decoration-none" itemprop="url" id="ytID_{date=dmYHi}">
<div class="p-1">
<picture itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<img itemprop="contentUrl" class="video__media" src="{image-1}" alt="" id="poster_{date=dmYHi}">
</picture>
<script>
function YouTubeGetID(a) {
a = a.split(/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/);
return void 0 !== a[2] ? a[2].split(/[^0-9a-z_\-]/i)[0] : a[0]
}
var url = "{link}";
document.getElementById("poster_{date=dmYHi}") && (document.getElementById("poster_{date=dmYHi}").src = "https://img.youtube.com/vi/" + YouTubeGetID(url) + "/0.jpg", document.getElementById("poster_{date=dmYHi}").id = "poster-replace");
</script>
<p class="card-text text-center py-3">
{title}
</p>
<span class="btn btn-outline-warning btn-block mb-3"><i class="fa fa-youtube fa-fw"></i> Смотреть</span>
</div>
</a>
пояснения:
a href="{link}" - формирует прямую ссылку на страницу с роликом
Например: https://www.youtube.com/watch?v=x55JSziUnYs
src="{image-1}" - готовит место для первой картинки из фида. Хотя у нас этой картинки и нет.
Ну а далее JS на основе регулярного выражения вычленяет из URL нужный нам id и подставляет его в URL с картинкой.
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
Поисковая оптимизация / Русское SEO
Нашел в недрах СЁРЧА, решил что лучше сюда чем в юмор. Источник: SEO на Хабрахабре... читать далее
Как наложить иконку плеера поверх картинки на примере youtube превью
При использовании великолепного плагина YouTube PopUp jQuery Plugin который позволяет любой ссылке ведущей на страницу видео-хостинга YouTube добавить специальный CSS класс для запуска в модальном... читать далее
Показ видео с youtube по ссылке на страницу ролика - YouTube PopUp jQuery Plugin
YouTube PopUp jQuery Plugin Для DataLife Engine. Теперь в виде плагина для простой установке в свой шаблон. Доработка плагина для использования в шаблона DLE CMS. Например для RSS информеров в... читать далее
Web-разработка / 3D CSS
Некоторое время назад, я негодовал, когда читал о возможностях, которые разработчики WebKit хотят внести в CSS. Там были разнообразные трансформации, анимации и тому подобные, не понятные... читать далее
Google / Продвинутая фильтрация в Google Analytics
В Google Analytics добавлен продвинутый функционал фильтрации по критериям (events). Фильтровать аудиторию можно в пару нажатий мышки, и для отфильтрованной группы доступны все стандартные средства... читать далее
Оптимизация производительности фронтенда. Часть 1. Critical Render Path
Здравствуйте. Меня зовут Ник, я фронтенд разработчик (жидкие аплодисменты). Кроме того, что я пишу код, я преподаю в Школе программистов hh.ru. Записи наших лекций от 2018-2019 учебного года можно... читать далее
Прокомментировать
Облако тегов
angular CSS css es6 frontend habrahabr.ru html HTML html5 JavaScript javascript js react ReactJS seo SEO на Хабрахабре skillfactory vue Блог компании RUVDS.com Блог компании SkillFactory Веб-дизайн Дизайн Интернет-маркетинг Поисковая оптимизация Программирование Разработка веб-сайтов Уроки CSS на Хабрахабре автомобильный сайт браузеры верстка вёрстка дайджест дизайн интернет-магазин корпоративный сайт модуль разработка ссылки фронтенд
Реклама на сайте