{"id":29663,"date":"2021-06-17T15:23:00","date_gmt":"2021-06-17T12:23:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29663"},"modified":"2021-10-17T04:14:19","modified_gmt":"2021-10-17T01:14:19","slug":"skaffa-youtube-videolista-efter-nyckelord-med-youtube-search-api-och-javascript","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/skaffa-youtube-videolista-efter-nyckelord-med-youtube-search-api-och-javascript\/","title":{"rendered":"Skaffa YouTube-videolista efter nyckelord med YouTube Search API och JavaScript"},"content":{"rendered":"<p>Tidigare har jag publicerat en artikel <a href=\"https:\/\/themewp.inform.click\/sv\/skaffa-youtube-videolista-med-nyckelord-med-hjalp-av-youtube-search-api\/\" title=\"Hur man f\u00e5r YouTube-videolista med nyckelord med hj\u00e4lp av YouTube Search API\" >Hur man f\u00e5r YouTube-videolista med nyckelord med hj\u00e4lp av YouTube Search API<\/a> som skrevs f\u00f6r PHP-utvecklare. En av v\u00e5ra l\u00e4sare letade efter samma l\u00f6sning i JavaScript.<\/p>\n<p>I den h\u00e4r artikeln studerar vi hur man s\u00f6ker p\u00e5 YouTube-videor med nyckelord med JavaScript med hj\u00e4lp av ett YouTube-s\u00f6k-API. En anv\u00e4ndare kan anv\u00e4nda den h\u00e4r l\u00f6sningen i sina JavaScript-applikationer som bygger p\u00e5 ReactJS, AngularJs, NodeJS, etc.<\/p>\n<h3>Skaffa din API-nyckel<\/h3>\n<p>F\u00f6r att komma ig\u00e5ng m\u00e5ste du f\u00f6rst skapa en API-nyckel p\u00e5 ditt Google Console-konto. Den h\u00e4r nyckeln \u00e4r n\u00f6dv\u00e4ndig n\u00e4r du interagerar med YouTube-API: erna. Utan denna nyckel betraktar YouTube alla inkommande API-samtal som obeh\u00f6riga.<\/p>\n<p>Nedan f\u00f6ljer stegen f\u00f6r att ta tag i API-nyckeln.<\/p>\n<ul>\n<li>G\u00e5 \u00f6ver till Googles utvecklarkonsol <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>Skapa ett nytt projekt. Alternativt kan du ocks\u00e5 v\u00e4lja ett befintligt projekt.<\/li>\n<li>Ge ditt projekt ett namn. Google Console skapar ett unikt projekt-ID f\u00f6r dig.<\/li>\n<li>Ditt nyskapade projekt visas l\u00e4ngst upp till v\u00e4nster i sidof\u00e4ltet.<\/li>\n<li>Klicka p\u00e5 Bibliotek fr\u00e5n den v\u00e4nstra menyn. Du kommer att se en lista \u00f6ver Googles API: er. Aktivera YouTube Data API.<\/li>\n<li>Klicka sedan p\u00e5 referenser fr\u00e5n v\u00e4nster meny. V\u00e4lj API-nyckel under Skapa referenser.<\/li>\n<li>Kopiera den h\u00e4r API-nyckeln.<\/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=\"Skaffa YouTube-videolista efter nyckelord med YouTube Search API och JavaScript\" ><\/a><\/p>\n<h3>Skapa ett anv\u00e4ndargr\u00e4nssnitt<\/h3>\n<p>Eftersom vi ska f\u00e5 en YouTube-videolista efter nyckelord, l\u00e5t oss bygga ett enkelt formul\u00e4r d\u00e4r anv\u00e4ndaren kan ange sitt nyckelord. Jag l\u00e4gger ocks\u00e5 till ytterligare tv\u00e5 f\u00e4lt f\u00f6r att ange ett antal videor som ska returneras och v\u00e4lja s\u00f6k efter alternativ. Du kan s\u00f6ka p\u00e5 YouTube-videor baserat p\u00e5 datum, betyg, relevans, titel eller antal visningar.<\/p>\n<p>Skapa en <code>index.html<\/code>fil och l\u00e4gg till f\u00f6ljande kod i den.<\/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>I ovanst\u00e5ende kod har jag lagt till &#8217;id&#8217; till varje formul\u00e4rinmatning som kommer att anv\u00e4ndas f\u00f6r att f\u00e5 inmatningsv\u00e4rdena. Den har ocks\u00e5 en tom div med id <code>videoListContainer<\/code>inuti vilken v\u00e5r videolista visas. Jag har inkluderat tv\u00e5 JS-filer &#8211; en \u00e4r fr\u00e5n Google och den andra \u00e4r v\u00e5r egen JS d\u00e4r vi kommer att skriva koden f\u00f6r YouTube-s\u00f6k-API. Jag inkluderade ocks\u00e5 Fancybox CSS och JS via CDN som kommer att spela YouTube-videor i popup-f\u00f6nstret.<\/p>\n<h3>YouTube Search API i JavaScript<\/h3>\n<p>N\u00e4r det g\u00e4ller JavaScript m\u00e5ste vi f\u00f6rst ladda Google API-klienten. N\u00e4r vi laddar Google API-klienten till\u00e5ter de oss att ringa deras API: er. L\u00e5t oss skapa en <code>js\/custom.js<\/code>fil och ladda Google API-klienten enligt f\u00f6ljande.<\/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>Se till att l\u00e4gga till din API-nyckel till <code>setApiKey<\/code>metoden. Om du st\u00e4ller in det korrekt ska meddelandet &quot;GAPI-klient laddad f\u00f6r API&quot; visas i webbl\u00e4sarkonsolen. Det betyder att vi \u00e4r bra att g\u00e5 vidare.<\/p>\n<h3>Ring API och renderresultat<\/h3>\n<p>Vi \u00e4r alla redo att ringa YouTube-s\u00f6k-API och visa resultatet i HTML. Det finns tv\u00e5 saker d\u00e4r vi beh\u00f6ver ringa API: et. S\u00f6kningen b\u00f6r inledas med ett klick p\u00e5 knappen Skicka och p\u00e5 paginatl\u00e4nkar. YouTube returnerar ett antal videor f\u00f6r en nyckelordss\u00f6kning. S\u00e5 vi kommer att l\u00e4gga till paginat f\u00f6r att navigera i n\u00e4sta och f\u00f6reg\u00e5ende upps\u00e4ttning videor.<\/p>\n<p>F\u00f6r att hantera dessa scenarier kommer v\u00e5r kod att vara som f\u00f6ljer. Koden nedan g\u00e5r ocks\u00e5 in i <code>js\/custom.js<\/code>filen.<\/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>H\u00e4r f\u00e5r vi f\u00f6rst inmatningsv\u00e4rdena fr\u00e5n ett formul\u00e4r och lagrar det i variabler. I <code>execute<\/code>metoden skriver vi en kod som ger ett samtal till YouTube API. Som svar f\u00e5r vi listan med videor tillsammans med antingen prevPageToken eller nextPageToken eller b\u00e5da. Dessa tokens anv\u00e4nds f\u00f6r att f\u00e5 en upps\u00e4ttning n\u00e4sta eller tidigare videolista efter nyckelord. Vi l\u00e4gger till dessa tokens som dataattribut till sidl\u00e4nkarna. Nu n\u00e4r vi klickar p\u00e5 paginatl\u00e4nkar initieras API-samtalet igen, utf\u00f6r sitt uppdrag och ger oss ett svar. Fr\u00e5n API-svaret visar vi videoinformation i div som har id <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=\"Skaffa YouTube-videolista efter nyckelord med YouTube Search API och JavaScript\" ><\/a><\/p>\n<p>I v\u00e5r handledning visar vi videominiatyrer och videotitlar i listan. Du kan ocks\u00e5 skriva ut annan videoinformation enligt dina krav. Anv\u00e4ndaren kan skriva ut variabeln f\u00f6r <code>listItems<\/code>att kontrollera vilken typ av information YouTube API returnerar i svaret. Bortsett fr\u00e5n det anv\u00e4nde jag ocks\u00e5 Fancybox i ovanst\u00e5ende kod med <code>data-fancybox<\/code>attributet. Detta attribut kommer att spela upp videon i en popup.<\/p>\n<p>Jag hoppas att du fick veta hur du f\u00e5r en YouTube-videolista med nyckelord i JavaScript. Dela dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n<h4>relaterade artiklar<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/youtube-api-hur-far-jag-en-lista-over-youtube-videor-fran-din-kanal\/\" title=\"YouTube API - Hur f\u00e5r jag en lista \u00f6ver YouTube-videor fr\u00e5n din kanal\">YouTube API &#8211; Hur f\u00e5r jag en lista \u00f6ver YouTube-videor fr\u00e5n din kanal<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/sa-har-far-du-youtube-videotaggar-med-youtube-api\/\" title=\"S\u00e5 h\u00e4r f\u00e5r du YouTube-videotaggar med hj\u00e4lp av YouTube API\">S\u00e5 h\u00e4r f\u00e5r du YouTube-videotaggar med hj\u00e4lp av YouTube API<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/hur-man-anvander-youtube-api-for-att-ladda-upp-video-pa-youtube-kanal\/\" title=\"Hur man anv\u00e4nder YouTube API f\u00f6r att ladda upp video p\u00e5 YouTube-kanal\">Hur man anv\u00e4nder YouTube API f\u00f6r att ladda upp video p\u00e5 YouTube-kanal<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I den h\u00e4r artikeln studerar vi hur man f\u00e5r YouTube-videor med nyckelord med hj\u00e4lp av YouTube-s\u00f6k-API och JavaScript. Vi l\u00e4gger ocks\u00e5 till pagination f\u00f6r att f\u00e5<\/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":[251],"tags":[850],"class_list":["post-29663","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-10","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/29663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=29663"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/29663\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/20180"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=29663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=29663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=29663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}