{"id":28701,"date":"2021-06-17T15:00:00","date_gmt":"2021-06-17T12:00:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28701"},"modified":"2021-10-18T03:59:03","modified_gmt":"2021-10-18T00:59:03","slug":"obtenha-a-lista-de-videos-do-youtube-por-palavras-chave-usando-a-api-de-pesquisa-do-youtube-e-o-javascript","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/obtenha-a-lista-de-videos-do-youtube-por-palavras-chave-usando-a-api-de-pesquisa-do-youtube-e-o-javascript\/","title":{"rendered":"Obtenha a lista de v\u00eddeos do YouTube por palavras-chave usando a API de pesquisa do YouTube e o JavaScript"},"content":{"rendered":"<p>No passado, publiquei um artigo <a href=\"https:\/\/themewp.inform.click\/pt-pt\/obtenha-a-lista-de-videos-do-youtube-por-palavras-chave-usando-a-api-de-pesquisa-do-youtube\/\" title=\"Como obter a lista de v\u00eddeos do YouTube por palavras-chave usando a API de pesquisa do YouTube,\" >Como obter a lista de v\u00eddeos do YouTube por palavras-chave usando a API de pesquisa do YouTube,<\/a> que foi escrito para desenvolvedores de PHP. Um de nossos leitores estava procurando a mesma solu\u00e7\u00e3o em JavaScript.<\/p>\n<p>Neste artigo, estudamos como pesquisar v\u00eddeos do YouTube por palavra-chave com JavaScript usando uma API de pesquisa do YouTube. Um usu\u00e1rio pode usar esta solu\u00e7\u00e3o em seus aplicativos JavaScript que s\u00e3o constru\u00eddos em ReactJS, AngularJs, NodeJS, etc.<\/p>\n<h3>Obtenha sua chave de API<\/h3>\n<p>Para come\u00e7ar, primeiro voc\u00ea precisa criar uma chave de API em sua conta do Console do Google. Essa chave \u00e9 necess\u00e1ria ao interagir com as APIs do YouTube. Sem essa chave, o YouTube considera todas as chamadas de API recebidas como n\u00e3o autorizadas.<\/p>\n<p>Abaixo est\u00e3o as etapas para obter a chave API.<\/p>\n<ul>\n<li>Acesse o Google Developer Console <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>Crie um novo projeto. Opcionalmente, voc\u00ea tamb\u00e9m pode selecionar um projeto existente.<\/li>\n<li>D\u00ea um nome ao seu projeto. O console do Google criar\u00e1 um ID de projeto exclusivo para voc\u00ea.<\/li>\n<li>Seu projeto rec\u00e9m-criado aparecer\u00e1 no topo da barra lateral esquerda.<\/li>\n<li>Clique em Biblioteca no menu esquerdo. Voc\u00ea ver\u00e1 uma lista de APIs do Google. Ative a API de dados do YouTube.<\/li>\n<li>A seguir, no menu esquerdo, clique em Credenciais. Selecione a chave API em Criar credenciais.<\/li>\n<li>Copie esta chave de 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=\"Obtenha a lista de v\u00eddeos do YouTube por palavras-chave usando a API de pesquisa do YouTube e o JavaScript\" ><\/a><\/p>\n<h3>Crie uma interface de usu\u00e1rio<\/h3>\n<p>Como vamos obter uma lista de v\u00eddeos do YouTube por palavra-chave, vamos construir um formul\u00e1rio simples onde o usu\u00e1rio pode inserir sua palavra-chave. Tamb\u00e9m estou adicionando mais dois campos para inserir uma s\u00e9rie de v\u00eddeos a serem retornados e escolher a op\u00e7\u00e3o de pesquisa por. Voc\u00ea pode pesquisar v\u00eddeos do YouTube com base em data, classifica\u00e7\u00e3o, relev\u00e2ncia, t\u00edtulo ou contagem de visualiza\u00e7\u00f5es.<\/p>\n<p>Crie um <code>index.html<\/code>arquivo e adicione o seguinte c\u00f3digo a ele.<\/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>No c\u00f3digo acima, adicionei &#8216;id&#8217; a cada entrada de formul\u00e1rio que ser\u00e1 usada para obter os valores de entrada. Ele tamb\u00e9m tem um div vazio com id <code>videoListContainer<\/code>dentro do qual nossa lista de v\u00eddeos ser\u00e1 exibida. Inclu\u00ed dois arquivos JS &#8211; um \u00e9 do Google e o outro \u00e9 nosso pr\u00f3prio JS, onde escreveremos o c\u00f3digo para a API de pesquisa do YouTube. Tamb\u00e9m inclu\u00ed Fancybox CSS e JS por meio do CDN, que reproduz v\u00eddeos do YouTube no pop-up.<\/p>\n<h3>API de pesquisa do YouTube em JavaScript<\/h3>\n<p>Quando se trata de JavaScript, primeiro precisamos carregar o cliente API do Google. Assim que carregamos o cliente API do Google, eles nos permitem chamar suas APIs. Vamos criar um <code>js\/custom.js<\/code>arquivo e carregar o cliente API do Google da seguinte maneira.<\/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>Certifique-se de adicionar sua chave de API ao <code>setApiKey<\/code>m\u00e9todo. Se voc\u00ea configur\u00e1-lo corretamente, no console do navegador, dever\u00e1 ver a mensagem &#8216;Cliente GAPI carregado para API&#8217;. Isso significa que estamos prontos para ir em frente.<\/p>\n<h3>Chame a API e renderize o resultado<\/h3>\n<p>Estamos todos prontos para chamar a API de pesquisa do YouTube e exibir o resultado em HTML. Existem 2 coisas em que precisamos chamar a API. A pesquisa deve iniciar com o clique do bot\u00e3o enviar e nos links de pagina\u00e7\u00e3o. O YouTube retorna uma s\u00e9rie de v\u00eddeos para uma pesquisa por palavra-chave. Portanto, adicionaremos paginate para navegar pelo conjunto de v\u00eddeos seguinte e anterior.<\/p>\n<p>Para lidar com esses cen\u00e1rios, nosso c\u00f3digo ser\u00e1 o seguinte. O c\u00f3digo abaixo tamb\u00e9m vai dentro do <code>js\/custom.js<\/code>arquivo.<\/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>Aqui, primeiro obtemos os valores de entrada de um Form e os armazenamos em vari\u00e1veis. No <code>execute<\/code>m\u00e9todo, escrevemos um c\u00f3digo que faz uma chamada para a API do YouTube. Em resposta, obtemos a lista de v\u00eddeos junto com prevPageToken ou nextPageToken ou ambos. Esses tokens s\u00e3o usados \u200b\u200bpara obter um conjunto de listas de v\u00eddeos anteriores ou anteriores por palavra-chave. Estamos anexando esses tokens como atributos de dados aos links de pagina\u00e7\u00e3o. Agora, quando clicamos em links de pagina\u00e7\u00e3o, a chamada de API \u00e9 iniciada novamente, executa sua tarefa e nos d\u00e1 uma resposta. A partir da resposta da API, estamos exibindo informa\u00e7\u00f5es de v\u00eddeo dentro do div que tem o 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=\"Obtenha a lista de v\u00eddeos do YouTube por palavras-chave usando a API de pesquisa do YouTube e o JavaScript\" ><\/a><\/p>\n<p>Em nosso tutorial, exibimos miniaturas e t\u00edtulos de v\u00eddeo na lista. Voc\u00ea tamb\u00e9m pode imprimir outras informa\u00e7\u00f5es de v\u00eddeo de acordo com sua necessidade. O usu\u00e1rio pode imprimir a vari\u00e1vel <code>listItems<\/code>para verificar que tipo de informa\u00e7\u00e3o a API do YouTube retorna na resposta. Al\u00e9m disso, tamb\u00e9m usei o Fancybox no c\u00f3digo acima usando o <code>data-fancybox<\/code>atributo. Este atributo reproduzir\u00e1 o v\u00eddeo em um pop-up.<\/p>\n<p>Espero que voc\u00ea saiba como obter uma lista de v\u00eddeos do YouTube por palavras-chave em JavaScript. Por favor, compartilhe seus pensamentos e sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n<h4>Artigos relacionados<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/pt-pt\/api-do-youtube-como-obter-uma-lista-de-videos-do-youtube-de-seu-canal\/\" title=\"API do YouTube - Como obter uma lista de v\u00eddeos do YouTube de seu canal\">API do YouTube &#8211; Como obter uma lista de v\u00eddeos do YouTube de seu canal<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/pt-pt\/como-obter-tags-de-video-do-youtube-usando-a-api-do-youtube\/\" title=\"Como obter tags de v\u00eddeo do YouTube usando a API do YouTube\">Como obter tags de v\u00eddeo do YouTube usando a API do YouTube<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/pt-pt\/como-usar-a-api-do-youtube-para-enviar-video-ao-canal-do-youtube\/\" title=\"Como usar a API do YouTube para carregar v\u00eddeos no canal do YouTube\">Como usar a API do YouTube para carregar v\u00eddeos no canal do YouTube<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Neste artigo, estudamos como obter v\u00eddeos do YouTube por palavra-chave usando a API de pesquisa do YouTube e JavaScript. Tamb\u00e9m adicionaremos pagina\u00e7\u00e3o para obter<\/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":[250],"tags":[848],"class_list":["post-28701","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-9","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/28701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=28701"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/28701\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/20180"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=28701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=28701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=28701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}