{"id":26333,"date":"2021-06-17T15:30:00","date_gmt":"2021-06-17T12:30:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26333"},"modified":"2021-10-17T18:15:58","modified_gmt":"2021-10-17T15:15:58","slug":"hankige-youtube-i-videoloend-marksonade-jargi-kasutades-youtube-i-otsingu-api-d-ja-javascripti","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/hankige-youtube-i-videoloend-marksonade-jargi-kasutades-youtube-i-otsingu-api-d-ja-javascripti\/","title":{"rendered":"Hankige YouTube&#8217;i videoloend m\u00e4rks\u00f5nade j\u00e4rgi, kasutades YouTube&#8217;i otsingu API-d ja JavaScripti"},"content":{"rendered":"<p>Varem olen avaldanud artikli <a href=\"https:\/\/themewp.inform.click\/et\/hankige-youtube-i-videoloend-marksonade-jargi-kasutades-youtube-i-otsingu-api-d\/\" title=\"Kuidas saada YouTube'i videoloend m\u00e4rks\u00f5nade abil YouTube'i otsingu API abil ja\" >Kuidas saada YouTube&#8217;i videoloend m\u00e4rks\u00f5nade abil YouTube&#8217;i otsingu API abil ja<\/a> mis oli kirjutatud PHP arendajatele. \u00dcks meie lugejaist otsis sama lahendust JavaScripti kaudu.<\/p>\n<p>Selles artiklis uurime, kuidas YouTube&#8217;i videoid otsida JavaScripti abil m\u00e4rks\u00f5na j\u00e4rgi, kasutades YouTube&#8217;i otsingu API-d. Kasutaja saab seda lahendust kasutada oma JavaScripti rakendustes, mis on loodud ReactJS, AngularJs, NodeJS jne.<\/p>\n<h3>Hankige oma API v\u00f5ti<\/h3>\n<p>Alustamiseks peate k\u00f5igepealt oma Google Console&#8217;i \u200b\u200bkontole looma API v\u00f5tme. See v\u00f5ti on vajalik YouTube&#8217;i API-dega suhtlemisel. Ilma selle v\u00f5tmeta peab YouTube k\u00f5iki sissetulevaid API-k\u00f5nesid volitamata.<\/p>\n<p>Allpool on juhised API v\u00f5tme haaramiseks.<\/p>\n<ul>\n<li>Minge Google&#8217;i arendajakonsooli <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>Looge uus projekt. Soovi korral saate valida ka olemasoleva projekti.<\/li>\n<li>Pange oma projektile nimi. Google Console loob teile ainulaadse projekti ID.<\/li>\n<li>Teie \u00e4sja loodud projekt ilmub vasaku k\u00fclgriba \u00fclaossa.<\/li>\n<li>Kl\u00f5psake vasakpoolses men\u00fc\u00fcs valikut Raamatukogu. N\u00e4ete Google&#8217;i API-de loendit. Lubage YouTube Data API.<\/li>\n<li>J\u00e4rgmiseks kl\u00f5psake vasakpoolses men\u00fc\u00fcs valikut Mandaadid. Valige API-v\u00f5ti loo Mandaatide loomine alt.<\/li>\n<li>Kopeerige see API v\u00f5ti.<\/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=\"Hankige YouTube&#039;i videoloend m\u00e4rks\u00f5nade j\u00e4rgi, kasutades YouTube&#039;i otsingu API-d ja JavaScripti\" ><\/a><\/p>\n<h3>Looge kasutajaliides<\/h3>\n<p>Kuna me kavatseme hankida YouTube&#8217;i videote loendi m\u00e4rks\u00f5nade kaupa, koostame lihtsa vormi, kuhu kasutaja saab oma m\u00e4rks\u00f5na sisestada. Lisan ka veel kaks v\u00e4lja, et sisestada mitu videot, et naasta ja valida suvandi Otsing j\u00e4rgi. YouTube&#8217;i videoid saate otsida kuup\u00e4eva, hinnangu, asjakohasuse, pealkirja v\u00f5i vaatamiste arvu alusel.<\/p>\n<p>Looge <code>index.html<\/code>fail ja lisage sinna j\u00e4rgmine kood.<\/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>\u00dclaltoodud koodis olen igale vormisisendile lisanud &#8217;id&#8217;, mida kasutatakse sisendv\u00e4\u00e4rtuste saamiseks. Sellel on ka t\u00fchi div ID-ga, <code>videoListContainer<\/code>milles kuvatakse meie videoloend. Lisasin kaks JS-faili &#8211; \u00fcks on Google&#8217;ilt ja teine \u200b\u200bon meie enda JS, kuhu kirjutame YouTube&#8217;i otsingu API koodi. Lisasin CDN-i kaudu ka Fancybox CSS-i ja JS-i, mis esitavad h\u00fcpikaknas YouTube&#8217;i videoid.<\/p>\n<h3>YouTube&#8217;i otsingu API JavaScriptis<\/h3>\n<p>JavaScripti osas peame k\u00f5igepealt laadima Google API kliendi. Kui laadime Google API kliendi, lubavad nad meil helistada oma API-dele. Loome <code>js\/custom.js<\/code>faili ja laadime Google API kliendi j\u00e4rgmiselt.<\/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>Lisage <code>setApiKey<\/code>meetodile kindlasti oma API v\u00f5ti. Kui m\u00e4\u00e4rate selle \u00f5igesti, peaksite brauserikonsoolis n\u00e4gema s\u00f5numit &quot;GAPI klient on API jaoks laaditud&quot;. See t\u00e4hendab, et meil on hea edasi minna.<\/p>\n<h3>Helistage API-le ja esitage tulemus<\/h3>\n<p>Oleme k\u00f5ik seadnud helistama YouTube&#8217;i otsingu API-le ja kuvama tulemuse HTML-is. API-le tuleb helistada 2 asja. Otsing peaks algama nupul Esita kl\u00f5psamise ja lehelinkide linkidel. YouTube tagastab m\u00e4rks\u00f5nade otsimiseks hulga videoid. Nii lisame j\u00e4rgmise ja eelmise videokomplekti navigeerimiseks paginate.<\/p>\n<p>Nende stsenaariumide lahendamiseks on meie kood j\u00e4rgmine. Allpool olev kood l\u00e4heb ka <code>js\/custom.js<\/code>faili sisse.<\/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>Siin saame k\u00f5igepealt vormilt sisendv\u00e4\u00e4rtused ja salvestame selle muutujatesse. Kui <code>execute<\/code>meetod, me kirjutada koodi, mis annab k\u00f5ne YouTube&#8217;i API. Vastuseks saame videote loendi koos prevPageToken v\u00f5i nextPageToken v\u00f5i m\u00f5lemaga. Neid m\u00e4rke kasutatakse m\u00e4rks\u00f5nade kaupa j\u00e4rgmiste v\u00f5i eelmiste videote komplekti saamiseks. Lisame need m\u00e4rgid andmete atribuutidena lehelinkidele. Kui kl\u00f5psame paginate linkidel, algatab API k\u00f5ne uuesti, t\u00e4idab oma \u00fclesannet ja annab meile vastuse. API vastuse p\u00f5hjal kuvame videoteavet div-is, mille ID on <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=\"Hankige YouTube&#039;i videoloend m\u00e4rks\u00f5nade j\u00e4rgi, kasutades YouTube&#039;i otsingu API-d ja JavaScripti\" ><\/a><\/p>\n<p>Meie \u00f5petuses kuvame loendis video pisipilte ja video pealkirju. V\u00f5ite printida ka muud videoteavet vastavalt teie n\u00f5uetele. Kasutaja v\u00f5ib muutuja printida, <code>listItems<\/code>et kontrollida, millist teavet YouTube API vastuses tagastab. Peale selle kasutasin atribuudi abil \u00fclaltoodud koodis ka Fancyboxi <code>data-fancybox<\/code>. See atribuut esitab videot h\u00fcpikaknas.<\/p>\n<p>Loodan, et \u00f5ppisite JavaScripti abil m\u00e4rks\u00f5nade j\u00e4rgi YouTube&#8217;i videoloendit hankima. Palun jagage oma m\u00f5tteid ja ettepanekuid allpool olevas kommentaaride jaotises.<\/p>\n<h4>seotud artiklid<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/youtube-api-kuidas-saada-oma-kanali-youtube-i-videote-loendit\/\" title=\"YouTube API - kuidas saada oma kanali YouTube&#039;i videote loendit\">YouTube API &#8211; kuidas saada oma kanali YouTube&#8217;i videote loendit<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/kuidas-hankida-youtube-i-videomargendeid-youtube-i-api-abil\/\" title=\"Kuidas hankida YouTube&#039;i videom\u00e4rgendeid YouTube&#039;i API abil\">Kuidas hankida YouTube&#8217;i videom\u00e4rgendeid YouTube&#8217;i API abil<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/kuidas-kasutada-youtube-i-api-d-video-uleslaadimiseks-youtube-i-kanalile\/\" title=\"Kuidas kasutada YouTube&#039;i API-d video \u00fcleslaadimiseks YouTube&#039;i kanalile\">Kuidas kasutada YouTube&#8217;i API-d video \u00fcleslaadimiseks YouTube&#8217;i kanalile<\/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>Selles artiklis uurime, kuidas YouTube&#8217;i videoid m\u00e4rks\u00f5nade abil YouTube&#8217;i otsingu API ja JavaScripti abil hankida. Lisame ka lehitsemise, et saada<\/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":[246],"tags":[842],"class_list":["post-26333","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-5","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/26333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/comments?post=26333"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/26333\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media\/20180"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media?parent=26333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/categories?post=26333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/tags?post=26333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}