{"id":25989,"date":"2021-06-17T15:16:00","date_gmt":"2021-06-17T12:16:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25989"},"modified":"2021-10-18T02:03:35","modified_gmt":"2021-10-17T23:03:35","slug":"obtenez-une-liste-de-videos-youtube-par-mots-cles-a-l-aide-de-l-api-de-recherche-youtube-et-de-javascript","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/obtenez-une-liste-de-videos-youtube-par-mots-cles-a-l-aide-de-l-api-de-recherche-youtube-et-de-javascript\/","title":{"rendered":"Obtenez une liste de vid\u00e9os YouTube par mots-cl\u00e9s \u00e0 l&rsquo;aide de l&rsquo;API de recherche YouTube et de JavaScript"},"content":{"rendered":"<p>Dans le pass\u00e9, j&rsquo;ai publi\u00e9 un article <a href=\"https:\/\/themewp.inform.click\/fr\/obtenez-une-liste-de-videos-youtube-par-mots-cles-a-l-aide-de-l-api-de-recherche-youtube\/\" title=\"Comment obtenir une liste de vid\u00e9os YouTube par mots-cl\u00e9s \u00e0 l'aide de l'API de recherche YouTube\" >Comment obtenir une liste de vid\u00e9os YouTube par mots-cl\u00e9s \u00e0 l&rsquo;aide de l&rsquo;API de recherche YouTube<\/a> qui a \u00e9t\u00e9 \u00e9crit pour les d\u00e9veloppeurs PHP. Un de nos lecteurs recherchait la m\u00eame solution en JavaScript.<\/p>\n<p>Dans cet article, nous \u00e9tudions comment rechercher des vid\u00e9os YouTube par mot-cl\u00e9 avec JavaScript \u00e0 l&rsquo;aide d&rsquo;une API de recherche YouTube. Un utilisateur peut utiliser cette solution dans ses applications JavaScript bas\u00e9es sur ReactJS, AngularJs, NodeJS, etc.<\/p>\n<h3>Obtenez votre cl\u00e9 API<\/h3>\n<p>Pour commencer, vous devez d&rsquo;abord cr\u00e9er une cl\u00e9 API sur votre compte Google Console. Cette cl\u00e9 est n\u00e9cessaire lors de l&rsquo;interaction avec les API YouTube. Sans cette cl\u00e9, YouTube consid\u00e8re tous les appels API entrants comme non autoris\u00e9s.<\/p>\n<p>Vous trouverez ci-dessous les \u00e9tapes pour r\u00e9cup\u00e9rer la cl\u00e9 API.<\/p>\n<ul>\n<li>Rendez-vous sur la console d\u00e9veloppeur de 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>Cr\u00e9er un nouveau projet. En option, vous pouvez \u00e9galement s\u00e9lectionner un projet existant.<\/li>\n<li>Donnez un nom \u00e0 votre projet. Google Console cr\u00e9era un ID de projet unique pour vous.<\/li>\n<li>Votre projet nouvellement cr\u00e9\u00e9 appara\u00eetra en haut de la barre lat\u00e9rale gauche.<\/li>\n<li>Cliquez sur Biblioth\u00e8que dans le menu de gauche. Vous verrez une liste d&rsquo;API Google. Activez l&rsquo;API de donn\u00e9es YouTube.<\/li>\n<li>Ensuite, dans le menu de gauche, cliquez sur les informations d&rsquo;identification. S\u00e9lectionnez la cl\u00e9 API sous Cr\u00e9er des informations d&rsquo;identification.<\/li>\n<li>Copiez cette cl\u00e9 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=\"Obtenez une liste de vid\u00e9os YouTube par mots-cl\u00e9s \u00e0 l&#039;aide de l&#039;API de recherche YouTube et de JavaScript\" ><\/a><\/p>\n<h3>Cr\u00e9er une interface utilisateur<\/h3>\n<p>Comme nous allons obtenir une liste de vid\u00e9os YouTube par mot-cl\u00e9, cr\u00e9ons un formulaire simple o\u00f9 l&rsquo;utilisateur peut saisir son mot-cl\u00e9. J&rsquo;ajoute \u00e9galement deux champs suppl\u00e9mentaires pour saisir un certain nombre de vid\u00e9os \u00e0 retourner et choisir la recherche par option. Vous pouvez rechercher des vid\u00e9os YouTube en fonction de la date, de l&rsquo;\u00e9valuation, de la pertinence, du titre ou du nombre de vues.<\/p>\n<p>Cr\u00e9ez un <code>index.html<\/code>fichier et ajoutez-y le code suivant.<\/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>Dans le code ci-dessus, j&rsquo;ai ajout\u00e9 &lsquo;id&rsquo; \u00e0 chaque entr\u00e9e de formulaire qui sera utilis\u00e9e pour obtenir les valeurs d&rsquo;entr\u00e9e. Il a \u00e9galement un div vide avec un identifiant \u00e0 l&rsquo; <code>videoListContainer<\/code>int\u00e9rieur duquel notre liste de vid\u00e9os s&rsquo;affichera. J&rsquo;ai inclus deux fichiers JS &#8211; l&rsquo;un provient de Google et l&rsquo;autre est notre propre JS o\u00f9 nous \u00e9crirons le code de l&rsquo;API de recherche YouTube. J&rsquo;ai \u00e9galement inclus Fancybox CSS et JS via CDN qui lira des vid\u00e9os YouTube dans la fen\u00eatre contextuelle.<\/p>\n<h3>API de recherche YouTube en JavaScript<\/h3>\n<p>En ce qui concerne JavaScript, nous devons d&rsquo;abord charger le client API Google. Une fois que nous chargeons le client API Google, ils nous permettent d&rsquo;appeler leurs API. Cr\u00e9ons un <code>js\/custom.js<\/code>fichier et chargeons le client API Google comme suit.<\/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>Assurez-vous d&rsquo;ajouter votre cl\u00e9 API \u00e0 la <code>setApiKey<\/code>m\u00e9thode. Si vous le configurez correctement, dans la console du navigateur, vous devriez voir le message \u00ab\u00a0client GAPI charg\u00e9 pour l&rsquo;API\u00a0\u00bb. Cela signifie que nous sommes pr\u00eats \u00e0 aller de l&rsquo;avant.<\/p>\n<h3>Appeler l&rsquo;API et afficher le r\u00e9sultat<\/h3>\n<p>Nous sommes tous pr\u00eats \u00e0 appeler l&rsquo;API de recherche YouTube et \u00e0 afficher le r\u00e9sultat dans le code HTML. Il y a 2 choses o\u00f9 nous devons appeler l&rsquo;API. La recherche doit d\u00e9marrer en cliquant sur le bouton d&rsquo;envoi et sur les liens de pagination. YouTube renvoie un certain nombre de vid\u00e9os pour une recherche par mot cl\u00e9. Nous allons donc ajouter une pagination pour naviguer dans l&rsquo;ensemble de vid\u00e9os suivant et pr\u00e9c\u00e9dent.<\/p>\n<p>Pour g\u00e9rer ces sc\u00e9narios, notre code sera le suivant. Le code ci-dessous va \u00e9galement \u00e0 l&rsquo;int\u00e9rieur du <code>js\/custom.js<\/code>fichier.<\/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>Ici, nous obtenons d&rsquo;abord les valeurs d&rsquo;entr\u00e9e d&rsquo;un formulaire et les stockons dans des variables. Dans la <code>execute<\/code>m\u00e9thode, nous \u00e9crivons un code qui appelle l&rsquo;API YouTube. En r\u00e9ponse, nous obtenons la liste des vid\u00e9os avec prevPageToken ou nextPageToken ou les deux. Ces jetons sont utilis\u00e9s pour obtenir un ensemble de listes de vid\u00e9os suivantes ou pr\u00e9c\u00e9dentes par mot-cl\u00e9. Nous ajoutons ces jetons en tant qu&rsquo;attributs de donn\u00e9es aux liens de pagination. D\u00e9sormais, lorsque nous cliquons sur les liens de pagination, l&rsquo;appel d&rsquo;API est \u00e0 nouveau lanc\u00e9, ex\u00e9cute sa t\u00e2che et nous donne une r\u00e9ponse. \u00c0 partir de la r\u00e9ponse de l&rsquo;API, nous affichons des informations vid\u00e9o \u00e0 l&rsquo;int\u00e9rieur du div qui a l&rsquo;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=\"Obtenez une liste de vid\u00e9os YouTube par mots-cl\u00e9s \u00e0 l&#039;aide de l&#039;API de recherche YouTube et de JavaScript\" ><\/a><\/p>\n<p>Dans notre didacticiel, nous affichons des vignettes vid\u00e9o et des titres vid\u00e9o sur la liste. Vous pouvez \u00e9galement imprimer d&rsquo;autres informations vid\u00e9o selon vos besoins. L&rsquo;utilisateur peut imprimer la variable <code>listItems<\/code>pour v\u00e9rifier le type d&rsquo;informations que l&rsquo;API YouTube renvoie dans la r\u00e9ponse. En dehors de cela, j&rsquo;ai \u00e9galement utilis\u00e9 Fancybox dans le code ci-dessus en utilisant l&rsquo; <code>data-fancybox<\/code>attribut. Cet attribut va lire la vid\u00e9o dans une fen\u00eatre contextuelle.<\/p>\n<p>J&rsquo;esp\u00e8re que vous avez appris \u00e0 obtenir une liste de vid\u00e9os YouTube par mots-cl\u00e9s en JavaScript. S&rsquo;il vous pla\u00eet partager vos pens\u00e9es et suggestions dans la section commentaires ci-dessous.<\/p>\n<h4>Articles Li\u00e9s<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/fr\/api-youtube-comment-obtenir-la-liste-des-videos-youtube-de-votre-chaine\/\" title=\"API YouTube - Comment obtenir la liste des vid\u00e9os YouTube de votre cha\u00eene\">API YouTube &#8211; Comment obtenir la liste des vid\u00e9os YouTube de votre cha\u00eene<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fr\/comment-obtenir-des-balises-video-youtube-a-l-aide-de-l-api-youtube\/\" title=\"Comment obtenir des balises vid\u00e9o YouTube \u00e0 l&#039;aide de l&#039;API YouTube\">Comment obtenir des balises vid\u00e9o YouTube \u00e0 l&rsquo;aide de l&rsquo;API YouTube<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fr\/comment-utiliser-l-api-youtube-pour-telecharger-une-video-sur-la-chaine-youtube\/\" title=\"Comment utiliser l&#039;API YouTube pour t\u00e9l\u00e9charger une vid\u00e9o sur la cha\u00eene YouTube\">Comment utiliser l&rsquo;API YouTube pour t\u00e9l\u00e9charger une vid\u00e9o sur la cha\u00eene YouTube<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans cet article, nous \u00e9tudions comment obtenir des vid\u00e9os YouTube par mot-cl\u00e9 en utilisant l&rsquo;API de recherche YouTube et JavaScript. Nous allons \u00e9galement ajouter une pagination pour obtenir<\/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":[245],"tags":[844],"class_list":["post-25989","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-4","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/25989","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=25989"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/25989\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/20180"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=25989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=25989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=25989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}