{"id":26265,"date":"2021-06-17T15:31:00","date_gmt":"2021-06-17T12:31:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26265"},"modified":"2021-10-18T02:59:54","modified_gmt":"2021-10-17T23:59:54","slug":"ottieni-l-elenco-dei-video-di-youtube-per-parole-chiave-utilizzando-l-api-di-ricerca-di-youtube-e-javascript","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/ottieni-l-elenco-dei-video-di-youtube-per-parole-chiave-utilizzando-l-api-di-ricerca-di-youtube-e-javascript\/","title":{"rendered":"Ottieni l&#8217;elenco dei video di YouTube per parole chiave utilizzando l&#8217;API di ricerca di YouTube e JavaScript"},"content":{"rendered":"<p>In passato, ho pubblicato un articolo <a href=\"https:\/\/themewp.inform.click\/it\/ottieni-l-elenco-dei-video-di-youtube-per-parole-chiave-utilizzando-l-api-di-ricerca-di-youtube\/\" title=\"Come ottenere l'elenco dei video di YouTube tramite parole chiave utilizzando l'API di ricerca di YouTube,\" >Come ottenere l&#8217;elenco dei video di YouTube tramite parole chiave utilizzando l&#8217;API di ricerca di YouTube,<\/a> scritto per gli sviluppatori PHP. Uno dei nostri lettori stava cercando la stessa soluzione in JavaScript.<\/p>\n<p>In questo articolo, studiamo come cercare i video di YouTube per parola chiave con JavaScript utilizzando un&#8217;API di ricerca di YouTube. Un utente pu\u00f2 utilizzare questa soluzione nelle proprie applicazioni JavaScript basate su ReactJS, AngularJs, NodeJS, ecc.<\/p>\n<h3>Ottieni la tua chiave API<\/h3>\n<p>Per iniziare, devi prima creare una chiave API sul tuo account Google Console. Questa chiave \u00e8 necessaria durante l&#8217;interazione con le API di YouTube. Senza questa chiave YouTube considera non autorizzate tutte le chiamate API in entrata.<\/p>\n<p>Di seguito sono riportati i passaggi per acquisire la chiave API.<\/p>\n<ul>\n<li>Vai alla Console per gli sviluppatori di Google <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>Crea un nuovo progetto. Facoltativamente, puoi anche selezionare un progetto esistente.<\/li>\n<li>Dai un nome al tuo progetto. Google Console creer\u00e0 per te un ID progetto univoco.<\/li>\n<li>Il tuo progetto appena creato apparir\u00e0 nella parte superiore della barra laterale sinistra.<\/li>\n<li>Fare clic su Libreria dal menu a sinistra. Vedrai un elenco di API di Google. Abilita l&#8217;API dei dati di YouTube.<\/li>\n<li>Successivamente, dal menu di sinistra, fai clic su Credenziali. Seleziona la chiave API in Crea credenziali.<\/li>\n<li>Copia questa chiave API.<\/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=\"Ottieni l&#039;elenco dei video di YouTube per parole chiave utilizzando l&#039;API di ricerca di YouTube e JavaScript\" ><\/a><\/p>\n<h3>Crea un&#8217;interfaccia utente<\/h3>\n<p>Poich\u00e9 otterremo un elenco di video di YouTube per parola chiave, costruiamo un semplice modulo in cui l&#8217;utente pu\u00f2 inserire la propria parola chiave. Sto anche aggiungendo altri due campi per inserire un numero di video da restituire e scegliere l&#8217;opzione di ricerca per. Puoi cercare i video di YouTube in base a data, valutazione, pertinenza, titolo o numero di visualizzazioni.<\/p>\n<p>Crea un <code>index.html<\/code>file e aggiungi il seguente codice al suo interno.<\/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>Nel codice sopra, ho aggiunto &quot;id&quot; a ciascun input del modulo che verr\u00e0 utilizzato per ottenere i valori di input. Ha anche un div vuoto con id <code>videoListContainer<\/code>all&#8217;interno del quale verr\u00e0 visualizzato il nostro elenco di video. Ho incluso due file JS: uno \u00e8 di Google e l&#8217;altro \u00e8 il nostro JS dove scriveremo il codice per l&#8217;API di ricerca di YouTube. Ho anche incluso Fancybox CSS e JS tramite CDN che riprodurranno i video di YouTube nel pop-up.<\/p>\n<h3>API di ricerca di YouTube in JavaScript<\/h3>\n<p>Quando si tratta di JavaScript, dobbiamo prima caricare il client API di Google. Una volta caricato il client API di Google, ci consentono di chiamare le loro API. Creiamo un <code>js\/custom.js<\/code>file e carichiamo il client API di Google come segue.<\/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>Assicurati di aggiungere la tua chiave API al <code>setApiKey<\/code>metodo. Se lo imposti correttamente, nella console del browser dovresti vedere il messaggio &quot;Client GAPI caricato per API&quot;. Significa che siamo a posto per andare avanti.<\/p>\n<h3>Chiama l&#8217;API e visualizza il risultato<\/h3>\n<p>Siamo tutti pronti per chiamare l&#8217;API di ricerca di YouTube e visualizzare il risultato nell&#8217;HTML. Ci sono 2 cose in cui dobbiamo chiamare l&#8217;API. La ricerca dovrebbe iniziare con il clic del pulsante di invio e sui collegamenti di paginazione. YouTube restituisce un numero di video per una ricerca per parole chiave. Quindi aggiungeremo la paginazione per navigare nel set di video successivo e precedente.<\/p>\n<p>Per gestire questi scenari, il nostro codice sar\u00e0 il seguente. Il codice seguente va anche all&#8217;interno del <code>js\/custom.js<\/code>file.<\/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>Qui otteniamo prima i valori di input da un form e li memorizziamo in variabili. Nel <code>execute<\/code>metodo, scriviamo un codice che d\u00e0 una chiamata all&#8217;API di YouTube. In risposta, otteniamo l&#8217;elenco dei video insieme a prevPageToken o nextPageToken o entrambi. Questi token vengono utilizzati per ottenere una serie di elenchi di video successivi o precedenti per parola chiave. Stiamo aggiungendo questi token come attributi di dati ai collegamenti di impaginazione. Ora, quando facciamo clic sui collegamenti di paginazione, la chiamata API si avvia di nuovo, esegue il suo compito e ci d\u00e0 una risposta. Dalla risposta dell&#8217;API, stiamo visualizzando le informazioni video all&#8217;interno del div che ha l&#8217;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=\"Ottieni l&#039;elenco dei video di YouTube per parole chiave utilizzando l&#039;API di ricerca di YouTube e JavaScript\" ><\/a><\/p>\n<p>Nel nostro tutorial, stiamo visualizzando le miniature dei video e i titoli dei video nell&#8217;elenco. Puoi anche stampare altre informazioni video secondo le tue esigenze. L&#8217;utente pu\u00f2 stampare la variabile <code>listItems<\/code>per verificare che tipo di informazioni restituisce l&#8217;API di YouTube nella risposta. A parte questo, ho anche usato Fancybox nel codice sopra usando l&#8217; <code>data-fancybox<\/code>attributo. Questo attributo riprodurr\u00e0 il video in un popup.<\/p>\n<p>Spero che tu sappia come ottenere un elenco di video di YouTube tramite parole chiave in JavaScript. Si prega di condividere i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.<\/p>\n<h4>articoli Correlati<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/it\/api-di-youtube-come-ottenere-l-elenco-dei-video-di-youtube-del-tuo-canale\/\" title=\"API di YouTube: come ottenere l&#039;elenco dei video di YouTube del tuo canale\">API di YouTube: come ottenere l&#8217;elenco dei video di YouTube del tuo canale<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/it\/come-ottenere-i-tag-video-di-youtube-utilizzando-l-api-di-youtube\/\" title=\"Come ottenere i tag video di YouTube utilizzando l&#039;API di YouTube\">Come ottenere i tag video di YouTube utilizzando l&#8217;API di YouTube<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/it\/come-utilizzare-l-api-di-youtube-per-caricare-video-sul-canale-youtube\/\" title=\"Come utilizzare l&#039;API di YouTube per caricare video sul canale YouTube\">Come utilizzare l&#8217;API di YouTube per caricare video sul canale YouTube<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In questo articolo, studiamo come ottenere video di YouTube per parola chiave utilizzando l&#8217;API di ricerca di YouTube e JavaScript. Aggiungeremo anche l&#8217;impaginazione per ottenere<\/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":[248],"tags":[846],"class_list":["post-26265","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-7","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/26265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/comments?post=26265"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/26265\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media\/20180"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media?parent=26265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/categories?post=26265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/tags?post=26265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}