Официальный RSS Youtube - как запускать видео на сайте




Еще один способ для запуска видео с ваших каналов и из плейлистов на своем сайте. На этот раз через официальный RSS самого сервиса Youtube.com

Так как официальный RSS Ютуба не отдает картинку ролика, то мы ее будем получать через JS на основе Youtube-id.


Для начала разберем каким образом формируется RSS лента на стороне Youtube.
Хорошая статья на данную тему тут

На данный момент (2021 год) 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 учебного года можно... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте