javascript - Get YouTube Banner from YT API JSON

I making my own subscribe counter and I want to get banner from YouTube Channel. I know how to get channel name, subscribe count from JSON but I pletly don't know how to do that in Javascript when it es to channel banner

I'm using the following format:

;id={CHANNEL-ID}&key={YOUR_API_KEY}

Getting the following info:

{
 "kind": "youtube#channelListResponse",
 "etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/B7Xtxsb9-7jxNp3CoPWIKeElMuU\"",
 "pageInfo": {
  "totalResults": 1,
  "resultsPerPage": 1
 },
 "items": [
  {
   "kind": "youtube#channel",
   "etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/2zFpcZbVGlelpdYDk2J-zRsB4Ck\"",
   "id": "UCPKqr9qSEXi6r03B18wRj6g",
   "brandingSettings": {
    "channel": {
     "title": "ThePajlok",
     "description": "Cześć, siema, witam Was!\nJa jestem ThePajlok inaczej znany jako po prostu Błażej. Szczerze mówiąc nie mam za  bardzo pomysłu co by tutaj Wam napisać ale spróbuję... \nNa moim kanale znajdziecie wszelakie gameplaye z gier, vlogi i inne filmy. Mam specyficzny humor do którego trzeba się przyzwyczaić ale mam nadzieję że każdemu z Was oglądających mój kanał się spodoba.Jeśli uważacie że mój kanał jest tego wart to śmiało możecie mnie zasubskrybować! :D\n\nGrupa FB: /\nDiscord: \nInstagram: bazejoo\nSnapchat: bazejoo\nSteam: \n\nCPU: Intel Core i3 4160 3.6 Ghz\nRAM: 8 GB DDR3\nGPU: Nvidia GeForce GTX 750 OC 2GB\nHDD1: 500 GB - System gry\nHDD2: 250 GB - Gry\nHDD3: 1 TB - Nagrywki YT i gry\nSystem: Windows 10 Pro 64-bit",
     "keywords": "ThePajlok \"Rocket League\" \"GTA V\" \"GTA Online\" FiveM BeamNG CS:GO",
     "defaultTab": "Featured",
     "showRelatedChannels": true,
     "showBrowseView": true,
     "featuredChannelsTitle": "Polecane kanały",
     "featuredChannelsUrls": [
      "UCEZ9aPZb_gIPinQXNVaYQuA",
      "UCw5LLRR_2lv97Mfwmiy-q2Q",
      "UCp3tpEjoX--uIlsTVhYETow",
      "UCtGnMWpCcoRZVWxkVKp3Ulg"
     ],
     "unsubscribedTrailer": "TD0QfnuDT0w",
     "profileColor": "#000000",
     "country": "PL"
    },
    "image": {
     "bannerImageUrl": ",00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
     "bannerMobileImageUrl": ",32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
     "bannerTabletLowImageUrl": ",00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
     "bannerTabletImageUrl": ",00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
     "bannerTabletHdImageUrl": ",00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
     "bannerTabletExtraHdImageUrl": ",00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
     "bannerMobileLowImageUrl": ",32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
     "bannerMobileMediumHdImageUrl": ",32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
     "bannerMobileHdImageUrl": ",32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
     "bannerMobileExtraHdImageUrl": ",32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
     "bannerTvImageUrl": ",00000000ffffffff-nd-c0xffffffff-rj-k-no",
     "bannerTvLowImageUrl": ",00000000ffffffff-nd-c0xffffffff-rj-k-no",
     "bannerTvMediumImageUrl": ",00000000ffffffff-nd-c0xffffffff-rj-k-no",
     "bannerTvHighImageUrl": ",00000000ffffffff-nd-c0xffffffff-rj-k-no"
    },
    "hints": [
     {
      "property": "channel.banner.mobile.medium.image.url",
      "value": ",32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no"
     },
     {
      "property": "channel.featured_tab.template.string",
      "value": "Everything"
     },
     {
      "property": "channel.modules.show_ments.bool",
      "value": "True"
     }
    ]
   }
  }
 ]
}

part of my code:

<script type="text/javascript">
 $(document).ready( function() {

     var chanName = "";

     loadChannel("UCPKqr9qSEXi6r03B18wRj6g");

     function loadChannel(name) {

        chanName = name;
        var url = ';id='+name+'&key=(MY-API)';
        $.getJSON(url, function(data) {
            $("#odometer").html(data.items[0].statistics.subscriberCount);
        });

        var url1 = ';id='+chanName+'&key=(MY-API)';
        $.getJSON(url1, function(data) {
            $('#ytName').html(data.items[0].snippet.title);
            $('#ytLink').html('<a href="/' + data.items[0].snippet.customUrl + '\">Link</a>');
        });

        var url2 = ';id='+name+'&key=my key';
        $.getJSON(url1, function(data) {
            $('#ytBanner').html(data.items[0].brandingSettings.channel.title);
        });
    }

    setInterval( function() {

        var url = ';id='+chanName+'&key=(MY-API)';
        $.getJSON(url, function(data) {
            $("#odometer").html(data.items[0].statistics.subscriberCount);
        });

    }, 2000);
});
</script>

I'm using the following format:

https://www.googleapis./youtube/v3/channels?part=brandingSettings&id={CHANNEL-ID}&key={YOUR_API_KEY}

Getting the following info:

{
 "kind": "youtube#channelListResponse",
 "etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/B7Xtxsb9-7jxNp3CoPWIKeElMuU\"",
 "pageInfo": {
  "totalResults": 1,
  "resultsPerPage": 1
 },
 "items": [
  {
   "kind": "youtube#channel",
   "etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/2zFpcZbVGlelpdYDk2J-zRsB4Ck\"",
   "id": "UCPKqr9qSEXi6r03B18wRj6g",
   "brandingSettings": {
    "channel": {
     "title": "ThePajlok",
     "description": "Cześć, siema, witam Was!\nJa jestem ThePajlok inaczej znany jako po prostu Błażej. Szczerze mówiąc nie mam za  bardzo pomysłu co by tutaj Wam napisać ale spróbuję... \nNa moim kanale znajdziecie wszelakie gameplaye z gier, vlogi i inne filmy. Mam specyficzny humor do którego trzeba się przyzwyczaić ale mam nadzieję że każdemu z Was oglądających mój kanał się spodoba.Jeśli uważacie że mój kanał jest tego wart to śmiało możecie mnie zasubskrybować! :D\n\nGrupa FB: https://www.facebook./groups/188269295234714/\nDiscord: https://discordapp./invite/Vxba3YB\nInstagram: bazejoo\nSnapchat: bazejoo\nSteam: https://steammunity./id/thepajlok\n\nCPU: Intel Core i3 4160 3.6 Ghz\nRAM: 8 GB DDR3\nGPU: Nvidia GeForce GTX 750 OC 2GB\nHDD1: 500 GB - System gry\nHDD2: 250 GB - Gry\nHDD3: 1 TB - Nagrywki YT i gry\nSystem: Windows 10 Pro 64-bit",
     "keywords": "ThePajlok \"Rocket League\" \"GTA V\" \"GTA Online\" FiveM BeamNG CS:GO",
     "defaultTab": "Featured",
     "showRelatedChannels": true,
     "showBrowseView": true,
     "featuredChannelsTitle": "Polecane kanały",
     "featuredChannelsUrls": [
      "UCEZ9aPZb_gIPinQXNVaYQuA",
      "UCw5LLRR_2lv97Mfwmiy-q2Q",
      "UCp3tpEjoX--uIlsTVhYETow",
      "UCtGnMWpCcoRZVWxkVKp3Ulg"
     ],
     "unsubscribedTrailer": "TD0QfnuDT0w",
     "profileColor": "#000000",
     "country": "PL"
    },
    "image": {
     "bannerImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1060-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
     "bannerMobileImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w640-fcrop64=1,32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
     "bannerTabletLowImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1138-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
     "bannerTabletImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1707-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
     "bannerTabletHdImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w2276-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
     "bannerTabletExtraHdImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w2560-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no",
     "bannerMobileLowImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w320-fcrop64=1,32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
     "bannerMobileMediumHdImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w960-fcrop64=1,32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
     "bannerMobileHdImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1280-fcrop64=1,32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
     "bannerMobileExtraHdImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1440-fcrop64=1,32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no",
     "bannerTvImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w2120-fcrop64=1,00000000ffffffff-nd-c0xffffffff-rj-k-no",
     "bannerTvLowImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w854-fcrop64=1,00000000ffffffff-nd-c0xffffffff-rj-k-no",
     "bannerTvMediumImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1280-fcrop64=1,00000000ffffffff-nd-c0xffffffff-rj-k-no",
     "bannerTvHighImageUrl": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w1920-fcrop64=1,00000000ffffffff-nd-c0xffffffff-rj-k-no"
    },
    "hints": [
     {
      "property": "channel.banner.mobile.medium.image.url",
      "value": "https://yt3.ggpht./8nXUqr_99OqXvBJh9X4-7s0m8HD-v_I7iQ84nctBM0bUH6R3s4rdhV2EVlWvu3qusIAFtLHY=w640-fcrop64=1,32b75a57cd48a5a8-nd-c0xffffffff-rj-k-no"
     },
     {
      "property": "channel.featured_tab.template.string",
      "value": "Everything"
     },
     {
      "property": "channel.modules.show_ments.bool",
      "value": "True"
     }
    ]
   }
  }
 ]
}

part of my code:

<script type="text/javascript">
 $(document).ready( function() {

     var chanName = "";

     loadChannel("UCPKqr9qSEXi6r03B18wRj6g");

     function loadChannel(name) {

        chanName = name;
        var url = 'https://www.googleapis./youtube/v3/channels?part=statistics&id='+name+'&key=(MY-API)';
        $.getJSON(url, function(data) {
            $("#odometer").html(data.items[0].statistics.subscriberCount);
        });

        var url1 = 'https://www.googleapis./youtube/v3/channels?part=snippet&id='+chanName+'&key=(MY-API)';
        $.getJSON(url1, function(data) {
            $('#ytName').html(data.items[0].snippet.title);
            $('#ytLink').html('<a href="http://youtube./' + data.items[0].snippet.customUrl + '\">Link</a>');
        });

        var url2 = 'https://www.googleapis./youtube/v3/channels?part=brandingSettings&id='+name+'&key=my key';
        $.getJSON(url1, function(data) {
            $('#ytBanner').html(data.items[0].brandingSettings.channel.title);
        });
    }

    setInterval( function() {

        var url = 'https://www.googleapis./youtube/v3/channels?part=statistics&id='+chanName+'&key=(MY-API)';
        $.getJSON(url, function(data) {
            $("#odometer").html(data.items[0].statistics.subscriberCount);
        });

    }, 2000);
});
</script>

Share Improve this question edited Nov 26, 2018 at 23:40 asked Nov 26, 2018 at 23:23 Bazejoo 471 gold badge2 silver badges8 bronze badges

That looks fairly plete? You're making a YouTube API call and processing the data that you get back and getting the channel title - is the problem that you can't get the subscriber count out of that JSON? If the problem is that the API call doesn't work from client side code then you can always write something quick on the server that will make these calls and return the data that the client needs to construct the banner, and cache the results too. (I guess it's safe to put your YouTube API key where the client can see it?) – Rup Commented Nov 26, 2018 at 23:47

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

var bannerHtml = "<img title='foo' alt='bar' src=" + data.items[0].image.bannerImageUrl +" />";
$('#ytBanner').html(bannerHtml);

Edit:

var bannerHtml = "<img title='foo' alt='bar' src=" + data.items[0].brandingSettings.image.bannerImageUrl +" />";

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Get YouTube Banner from YT API JSON - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)