{"id":25942,"date":"2021-06-17T14:46:00","date_gmt":"2021-06-17T11:46:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25942"},"modified":"2021-10-17T20:15:50","modified_gmt":"2021-10-17T17:15:50","slug":"hanki-youtube-videoluettelo-avainsanojen-avulla-youtube-hakusovellusliittyman-ja-javascriptin-avulla","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/hanki-youtube-videoluettelo-avainsanojen-avulla-youtube-hakusovellusliittyman-ja-javascriptin-avulla\/","title":{"rendered":"Hanki YouTube-videoluettelo avainsanojen avulla YouTube-hakusovellusliittym\u00e4n ja JavaScriptin avulla"},"content":{"rendered":"<p>Aiemmin olen julkaissut artikkelin <a href=\"https:\/\/themewp.inform.click\/fi\/hanki-youtube-videoluettelo-avainsanojen-mukaan-kayttamalla-youtube-hakusovellusliittymaa\/\" title=\"Miten saada YouTube-videoluettelo avainsanoilla YouTube-hakusovellusliittym\u00e4ll\u00e4,\" >Miten saada YouTube-videoluettelo avainsanoilla YouTube-hakusovellusliittym\u00e4ll\u00e4,<\/a> joka on kirjoitettu PHP-kehitt\u00e4jille. Yksi lukijoistamme etsii samaa ratkaisua JavaScriptist\u00e4.<\/p>\n<p>T\u00e4ss\u00e4 artikkelissa tutkitaan, miten voit hakea YouTube-videoita avainsanan avulla JavaScriptin avulla YouTube-hakusovellusliittym\u00e4n avulla. K\u00e4ytt\u00e4j\u00e4 voi k\u00e4ytt\u00e4\u00e4 t\u00e4t\u00e4 ratkaisua JavaScript-sovelluksissaan, jotka on rakennettu ReactJS-, AngularJs-, NodeJS- jne.<\/p>\n<h3>Hanki API-avain<\/h3>\n<p>Aloittamiseksi sinun on ensin luotava API-avain Google Console -tiliisi. T\u00e4m\u00e4 avain on v\u00e4ltt\u00e4m\u00e4t\u00f6n, kun olet vuorovaikutuksessa YouTube-sovellusliittymien kanssa. Ilman t\u00e4t\u00e4 avainta YouTube pit\u00e4\u00e4 kaikkia saapuvia API-puheluja luvattomina.<\/p>\n<p>Alla on vaiheet API-avaimen nappaamiseksi.<\/p>\n<ul>\n<li>Siirry Google Developer Consoleen <a href=\"https:\/\/console.developers.google.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><a href=\"https:\/\/console.developers.google.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">https:\/\/console.developers.google.com<\/a>.<\/li>\n<li>Luo uusi projekti. Vaihtoehtoisesti voit my\u00f6s valita olemassa olevan projektin.<\/li>\n<li>Anna projektillesi nimi. Google Console luo sinulle yksil\u00f6llisen projektitunnuksen.<\/li>\n<li>Uusi luomasi projekti n\u00e4kyy vasemman sivupalkin yl\u00e4osassa.<\/li>\n<li>Napsauta vasemmasta valikosta Kirjasto. N\u00e4et luettelon Google-sovellusliittymist\u00e4. Ota k\u00e4ytt\u00f6\u00f6n YouTube Data -sovellusliittym\u00e4.<\/li>\n<li>Napsauta sitten vasemmasta valikosta Tunnistetiedot. Valitse API-avain kohdassa Luo kirjautumistiedot.<\/li>\n<li>Kopioi t\u00e4m\u00e4 API-avain.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20179-6081c8d9a2d8f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20179-6081c8d9a2d8f.png\" alt=\"Hanki YouTube-videoluettelo avainsanojen avulla YouTube-hakusovellusliittym\u00e4n ja JavaScriptin avulla\" ><\/a><\/p>\n<h3>Luo k\u00e4ytt\u00f6liittym\u00e4<\/h3>\n<p>Kun aiomme saada YouTube-videoluettelon avainsanojen mukaan, rakennetaan yksinkertainen lomake, johon k\u00e4ytt\u00e4j\u00e4 voi kirjoittaa avainsanansa. Lis\u00e4\u00e4n my\u00f6s kaksi muuta kentt\u00e4\u00e4 sy\u00f6tt\u00e4\u00e4ksesi useita palautettavia videoita ja valitsemalla haun vaihtoehdon. Voit hakea YouTube-videoita p\u00e4iv\u00e4m\u00e4\u00e4r\u00e4n, luokituksen, osuvuuden, otsikon tai katselukertojen perusteella.<\/p>\n<p>Luo <code>index.html<\/code>tiedosto ja lis\u00e4\u00e4 siihen seuraava koodi.<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;head&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;meta charset=\"UTF-8\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;title&gt;Get YouTube Video by Keyword&lt;\/title&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fancybox\/3.5.7\/jquery.fancybox.min.css\" \/&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;style&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.paginate {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin-right: 5px;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0li {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0display: inline-block;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/style&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/head&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;body&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;form id=\"yt-form\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p&gt;&lt;input type=\"text\" id=\"keyword-input\" placeholder=\"Enter keyword\" required&gt;&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p&gt;&lt;input type=\"number\" id=\"maxresult-input\" placeholder=\"Max Results\" min=\"1\" max=\"50\" required&gt;&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;select id=\"order-input\" required&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"\"&gt;--SELECT ORDER--&lt;\/option&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"date\"&gt;Date&lt;\/option&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"rating\"&gt;Rating&lt;\/option&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"relevance\"&gt;Relevance&lt;\/option&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"title\"&gt;Title&lt;\/option&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"viewCount\" selected&gt;View Count&lt;\/option&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/select&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"submit\" value=\"Submit\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/form&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div id=\"videoListContainer\"&gt;&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/apis.google.com\/js\/api.js\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fancybox\/3.5.7\/jquery.fancybox.min.js\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;script src=\"js\/custom.js\"&gt;&lt;\/script&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Yll\u00e4 olevaan koodiin olen lis\u00e4nnyt jokaiselle lomakesy\u00f6tteelle id, jota k\u00e4ytet\u00e4\u00e4n sy\u00f6tt\u00f6arvojen saamiseen. Siin\u00e4 on my\u00f6s tyhj\u00e4 div, jolla on tunnus, jonka <code>videoListContainer<\/code>sis\u00e4ll\u00e4 videoluettelomme n\u00e4kyy. Olen sis\u00e4llytt\u00e4nyt kaksi JS-tiedostoa &#8211; yksi on Googlelta ja toinen on oma JS, johon kirjoitamme koodin YouTube-hakusovellusliittym\u00e4lle. Lis\u00e4sin my\u00f6s Fancybox CSS: n ja JS: n CDN: n kautta, joka toistaa YouTube-videoita ponnahdusikkunassa.<\/p>\n<h3>YouTube-hakusovellusliittym\u00e4 JavaScript-muodossa<\/h3>\n<p>JavaScriptin suhteen meid\u00e4n on ensin ladattava Google API -asiakasohjelma. Kun lataamme Google-sovellusliittym\u00e4asiakkaan, ne antavat meille mahdollisuuden kutsua sovellusliittymi\u00e4. Luodaan <code>js\/custom.js<\/code>tiedosto ja ladataan Google API -asiakas seuraavasti.<\/p>\n<pre><code>gapi.load(\"client\", loadClient);\n\u00a0\u00a0\nfunction loadClient() {\n\u00a0\u00a0\u00a0\u00a0gapi.client.setApiKey(\"YOUTUBE_API_KEY\");\n\u00a0\u00a0\u00a0\u00a0return gapi.client.load(\"https:\/\/www.googleapis.com\/discovery\/v1\/apis\/youtube\/v3\/rest\")\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.then(function() { console.log(\"GAPI client loaded for API\"); },\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function(err) { console.error(\"Error loading GAPI client for API\", err); });\n}<\/code><\/pre>\n<p>Muista lis\u00e4t\u00e4 API-avain <code>setApiKey<\/code>menetelm\u00e4\u00e4n. Jos asetit sen oikein, selainkonsolissa sinun pit\u00e4isi n\u00e4hd\u00e4 viesti &#8217;GAPI-asiakas ladattu API: lle&#8217;. Se tarkoittaa, ett\u00e4 meill\u00e4 on hyv\u00e4 edet\u00e4.<\/p>\n<h3>Kutsu sovellusliittym\u00e4 ja Render-tulos<\/h3>\n<p>Olemme kaikki asettaneet soittamaan YouTube-hakusovellusliittym\u00e4\u00e4n ja n\u00e4ytt\u00e4m\u00e4\u00e4n tuloksen HTML-muodossa. API: lle on kutsuttava 2 asiaa. Haun tulisi k\u00e4ynnisty\u00e4 napsauttamalla L\u00e4het\u00e4-painiketta ja sivutettavien linkkien kohdalla. YouTube palauttaa useita videoita avainsanahakuun. Joten lis\u00e4\u00e4mme sivunumeron siirty\u00e4ksesi seuraavaan ja edelliseen videosarjaan.<\/p>\n<p>N\u00e4iden tilanteiden k\u00e4sittelemiseksi koodi on seuraava. Alla oleva koodi menee my\u00f6s <code>js\/custom.js<\/code>tiedoston sis\u00e4lle .<\/p>\n<pre><code>const ytForm = document.getElementById('yt-form');\nconst keywordInput = document.getElementById('keyword-input');\nconst maxresultInput = document.getElementById('maxresult-input');\nconst orderInput = document.getElementById('order-input');\nconst videoList = document.getElementById('videoListContainer');\nvar pageToken = '';\n\u00a0\u00a0\nytForm.addEventListener('submit', e =&gt; {\n\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\u00a0\u00a0\u00a0execute();\n});\n\u00a0\u00a0\nfunction paginate(e, obj) {\n\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\u00a0\u00a0\u00a0pageToken = obj.getAttribute('data-id');\n\u00a0\u00a0\u00a0\u00a0execute();\n}\n\u00a0\u00a0\n\/\/ Make sure the client is loaded before calling this method.\nfunction execute() {\n\u00a0\u00a0\u00a0\u00a0const searchString = keywordInput.value;\n\u00a0\u00a0\u00a0\u00a0const maxresult = maxresultInput.value;\n\u00a0\u00a0\u00a0\u00a0const orderby = orderInput.value;\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0var arr_search = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"part\": 'snippet',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"type\": 'video',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"order\": orderby,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"maxResults\": maxresult,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"q\": searchString\n\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0if (pageToken != '') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0arr_search.pageToken = pageToken;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0return gapi.client.youtube.search.list(arr_search)\n\u00a0\u00a0\u00a0\u00a0.then(function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Handle the results here (response.result has the parsed body).\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const listItems = response.result.items;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (listItems) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let output = '&lt;h4&gt;Videos&lt;\/h4&gt;&lt;ul&gt;';\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0listItems.forEach(item =&gt; {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const videoId = item.id.videoId;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const videoTitle = item.snippet.title;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0output += `\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li&gt;&lt;a data-fancybox href=\"https:\/\/www.youtube.com\/watch?v=${videoId}\"&gt;&lt;img src=\"http:\/\/i3.ytimg.com\/vi\/${videoId}\/hqdefault.jpg\" \/&gt;&lt;\/a&gt;&lt;p&gt;${videoTitle}&lt;\/p&gt;&lt;\/li&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0`;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0output += '&lt;\/ul&gt;';\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (response.result.prevPageToken) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0output += `&lt;br&gt;&lt;a class=\"paginate\" href=\"#\" data-id=\"${response.result.prevPageToken}\" onclick=\"paginate(event, this)\"&gt;Prev&lt;\/a&gt;`;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (response.result.nextPageToken) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0output += `&lt;a href=\"#\" class=\"paginate\" data-id=\"${response.result.nextPageToken}\" onclick=\"paginate(event, this)\"&gt;Next&lt;\/a&gt;`;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Output list\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0videoList.innerHTML = output;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0function(err) { console.error(\"Execute error\", err); });\n}<\/code><\/pre>\n<p>T\u00e4ss\u00e4 saamme ensin tuloarvot lomakkeelta ja tallennamme sen muuttujiin. Vuonna <code>execute<\/code>menetelm\u00e4ss\u00e4, me kirjoittaa koodia, joka antaa kutsun YouTube API. Vastauksena saamme videoluettelon joko prevPageToken tai nextPageToken tai molemmat. N\u00e4it\u00e4 tunnuksia k\u00e4ytet\u00e4\u00e4n seuraavien tai edellisten videoiden luettelon hakemiseen avainsanan mukaan. Liit\u00e4mme n\u00e4m\u00e4 tunnukset tietom\u00e4\u00e4rittein\u00e4 sivulinkeihin. Kun napsautamme sivulinkkej\u00e4, API-kutsu k\u00e4ynnistyy uudelleen, suorittaa teht\u00e4v\u00e4ns\u00e4 ja antaa meille vastauksen. API-vastauksesta n\u00e4yt\u00e4mme videotietoja div: n sis\u00e4ll\u00e4, jolla on tunnus <code>videoListContainer<\/code>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20179-6081c8d9a2d8f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20179-6081c8d9a2d8f.png\" alt=\"Hanki YouTube-videoluettelo avainsanojen avulla YouTube-hakusovellusliittym\u00e4n ja JavaScriptin avulla\" ><\/a><\/p>\n<p>Opetusohjelmassa n\u00e4yt\u00e4mme videon pikkukuvia ja videonimikkeit\u00e4 luettelossa. Voit my\u00f6s tulostaa muita videotietoja vaatimuksesi mukaan. K\u00e4ytt\u00e4j\u00e4 voi tulostaa muuttujan <code>listItems<\/code>tarkistaakseen, mink\u00e4laisia \u200b\u200btietoja YouTube-sovellusliittym\u00e4 palauttaa vastauksessa. Sen lis\u00e4ksi k\u00e4ytin my\u00f6s Fancyboxia yll\u00e4 olevassa koodissa k\u00e4ytt\u00e4en <code>data-fancybox<\/code>attribuuttia. T\u00e4m\u00e4 attribuutti toistaa videon ponnahdusikkunassa.<\/p>\n<p>Toivon, ett\u00e4 opit saamaan YouTube-videoluettelon avainsanoilla JavaScriptiss\u00e4. Jaa ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n<h4>Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/youtube-sovellusliittyma-kuinka-saada-luettelo-kanavasi-youtube-videoista\/\" title=\"YouTube-sovellusliittym\u00e4 - Kuinka saada luettelo kanavasi YouTube-videoista\">YouTube-sovellusliittym\u00e4 &#8211; Kuinka saada luettelo kanavasi YouTube-videoista<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-hankkia-youtube-videotunnisteet-youtube-sovellusliittyman-avulla\/\" title=\"Kuinka hankkia YouTube-videotunnisteet YouTube-sovellusliittym\u00e4n avulla\">Kuinka hankkia YouTube-videotunnisteet YouTube-sovellusliittym\u00e4n avulla<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-kayttaa-youtube-sovellusliittymaa-videon-lataamiseen-youtube-kanavalle\/\" title=\"Kuinka k\u00e4ytt\u00e4\u00e4 YouTube-sovellusliittym\u00e4\u00e4 videon lataamiseen YouTube-kanavalle\">Kuinka k\u00e4ytt\u00e4\u00e4 YouTube-sovellusliittym\u00e4\u00e4 videon lataamiseen YouTube-kanavalle<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>T\u00e4ss\u00e4 artikkelissa tutkitaan, kuinka saada YouTube-videoita avainsanalla YouTube-hakusovellusliittym\u00e4n ja JavaScriptin avulla. Lis\u00e4\u00e4mme my\u00f6s sivunumeron<\/p>\n","protected":false},"author":1,"featured_media":20180,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[247],"tags":[843],"class_list":["post-25942","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-6","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/25942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=25942"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/25942\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/20180"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=25942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=25942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=25942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}