{"id":25923,"date":"2021-06-17T15:09:00","date_gmt":"2021-06-17T12:09:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25923"},"modified":"2021-10-18T02:28:41","modified_gmt":"2021-10-17T23:28:41","slug":"erhalten-sie-eine-youtube-videoliste-nach-schluesselwoertern-mit-der-youtube-such-api-und-javascript","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/erhalten-sie-eine-youtube-videoliste-nach-schluesselwoertern-mit-der-youtube-such-api-und-javascript\/","title":{"rendered":"Erhalten Sie eine YouTube-Videoliste nach Schl\u00fcsselw\u00f6rtern mit der YouTube-Such-API und JavaScript"},"content":{"rendered":"<p>In der Vergangenheit habe ich einen Artikel ver\u00f6ffentlicht, <a href=\"https:\/\/themewp.inform.click\/de\/youtube-videoliste-nach-schluesselwoertern-mithilfe-der-youtube-such-api-abrufen\/\" title=\"wie man eine YouTube-Videoliste nach Schl\u00fcsselw\u00f6rtern mit der YouTube-Such-API erh\u00e4lt,\" >wie man eine YouTube-Videoliste nach Schl\u00fcsselw\u00f6rtern mit der YouTube-Such-API erh\u00e4lt,<\/a> der f\u00fcr PHP-Entwickler geschrieben wurde. Einer unserer Leser suchte nach der gleichen L\u00f6sung in JavaScript.<\/p>\n<p>In diesem Artikel untersuchen wir, wie Sie YouTube-Videos mit JavaScript mithilfe einer YouTube-Such-API nach Schl\u00fcsselw\u00f6rtern durchsuchen. Ein Benutzer kann diese L\u00f6sung in seinen JavaScript-Anwendungen verwenden, die auf ReactJS, AngularJs, NodeJS usw.<\/p>\n<h3>Holen Sie sich Ihren API-Schl\u00fcssel<\/h3>\n<p>Um zu beginnen, m\u00fcssen Sie zun\u00e4chst einen API-Schl\u00fcssel in Ihrem Google Console-Konto erstellen. Dieser Schl\u00fcssel ist bei der Interaktion mit den YouTube-APIs erforderlich. Ohne diesen Schl\u00fcssel betrachtet YouTube alle eingehenden API-Aufrufe als nicht autorisiert.<\/p>\n<p>Nachfolgend finden Sie die Schritte zum Abrufen des API-Schl\u00fcssels.<\/p>\n<ul>\n<li>Gehen Sie zur 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>Erstellen Sie ein neues Projekt. Optional k\u00f6nnen Sie auch ein bestehendes Projekt ausw\u00e4hlen.<\/li>\n<li>Geben Sie Ihrem Projekt einen Namen. Die Google Console erstellt eine eindeutige Projekt-ID f\u00fcr Sie.<\/li>\n<li>Ihr neu erstelltes Projekt wird oben in der linken Seitenleiste angezeigt.<\/li>\n<li>Klicken Sie im linken Men\u00fc auf Bibliothek. Sie sehen eine Liste der Google APIs. Aktivieren Sie die YouTube-Daten-API.<\/li>\n<li>Klicken Sie anschlie\u00dfend im linken Men\u00fc auf die Anmeldeinformationen. W\u00e4hlen Sie API-Schl\u00fcssel unter Anmeldeinformationen erstellen aus.<\/li>\n<li>Kopieren Sie diesen API-Schl\u00fcssel.<\/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=\"Erhalten Sie eine YouTube-Videoliste nach Schl\u00fcsselw\u00f6rtern mit der YouTube-Such-API und JavaScript\" ><\/a><\/p>\n<h3>Erstellen Sie eine Benutzeroberfl\u00e4che<\/h3>\n<p>Da wir eine YouTube-Videoliste nach Schl\u00fcsselw\u00f6rtern erhalten, erstellen wir ein einfaches Formular, in das der Benutzer sein Schl\u00fcsselwort eingeben kann. Ich f\u00fcge auch zwei weitere Felder hinzu, um eine Reihe von Videos einzugeben, die zur\u00fcckgegeben werden sollen, und w\u00e4hle die Option Suchen nach. Sie k\u00f6nnen YouTube-Videos nach Datum, Bewertung, Relevanz, Titel oder Anzahl der Aufrufe durchsuchen.<\/p>\n<p>Erstellen Sie eine <code>index.html<\/code>Datei und f\u00fcgen Sie den folgenden Code darin ein.<\/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>Im obigen Code habe ich &#8218;id&#8216; zu jeder Formulareingabe hinzugef\u00fcgt, die verwendet wird, um die Eingabewerte zu erhalten. Es hat auch ein leeres Div mit ID, <code>videoListContainer<\/code>in dem unsere Videoliste angezeigt wird. Ich habe zwei JS-Dateien eingef\u00fcgt \u2013 eine von Google und die andere ist unser eigenes JS, in das wir den Code f\u00fcr die YouTube-Such-API schreiben werden. Ich habe auch Fancybox CSS und JS \u00fcber CDN eingebunden, die YouTube-Videos im Popup abspielen.<\/p>\n<h3>YouTube-Such-API in JavaScript<\/h3>\n<p>Bei JavaScript m\u00fcssen wir zun\u00e4chst den Google API-Client laden. Sobald wir den Google API-Client geladen haben, erlauben sie uns, ihre APIs aufzurufen. Lassen Sie uns eine <code>js\/custom.js<\/code>Datei erstellen und den Google API-Client wie folgt laden.<\/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>Stellen Sie sicher, dass Sie der <code>setApiKey<\/code>Methode Ihren API-Schl\u00fcssel hinzuf\u00fcgen. Wenn Sie es richtig eingestellt haben, sollten Sie in der Browserkonsole die Meldung &#8218;GAPI-Client f\u00fcr API geladen&#8216; sehen. Es bedeutet, dass wir gut vorankommen.<\/p>\n<h3>Rufen Sie die API auf und rendern Sie das Ergebnis<\/h3>\n<p>Wir sind alle bereit, die YouTube-Such-API aufzurufen und das Ergebnis im HTML anzuzeigen. Es gibt 2 Dinge, bei denen wir die API aufrufen m\u00fcssen. Die Suche sollte mit dem Klicken auf die Schaltfl\u00e4che &quot;Senden&quot; und auf paginierten Links beginnen. YouTube gibt eine Reihe von Videos f\u00fcr eine Stichwortsuche zur\u00fcck. Daher werden wir Paginierung hinzuf\u00fcgen, um durch den n\u00e4chsten und vorherigen Satz von Videos zu navigieren.<\/p>\n<p>Um diese Szenarien zu handhaben, sieht unser Code wie folgt aus. Der folgende Code geht auch in die <code>js\/custom.js<\/code>Datei.<\/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>Hier erhalten wir zuerst die Eingabewerte aus einem Formular und speichern sie in Variablen. In der <code>execute<\/code>Methode schreiben wir einen Code, der die YouTube-API aufruft. Als Antwort erhalten wir die Liste der Videos zusammen mit prevPageToken oder nextPageToken oder beiden. Diese Token werden verwendet, um eine Liste mit n\u00e4chsten oder vorherigen Videos nach Schl\u00fcsselwort zu erhalten. Wir f\u00fcgen diese Token als Datenattribute an die Paginierungslinks an. Wenn wir nun auf paginate-Links klicken, wird der API-Aufruf erneut gestartet, f\u00fchrt seine Aufgabe aus und gibt uns eine Antwort. Aus der API-Antwort zeigen wir Videoinformationen innerhalb des div mit der ID an <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=\"Erhalten Sie eine YouTube-Videoliste nach Schl\u00fcsselw\u00f6rtern mit der YouTube-Such-API und JavaScript\" ><\/a><\/p>\n<p>In unserem Tutorial zeigen wir Video-Thumbnails und Videotitel in der Liste an. Sie k\u00f6nnen auch andere Videoinformationen nach Ihren Anforderungen ausdrucken. Der Benutzer kann die Variable drucken, um <code>listItems<\/code>zu \u00fcberpr\u00fcfen, welche Art von Informationen die YouTube-API in der Antwort zur\u00fcckgibt. Abgesehen davon habe ich im obigen Code auch Fancybox mit dem <code>data-fancybox<\/code>Attribut verwendet. Dieses Attribut spielt das Video in einem Pop-up ab.<\/p>\n<p>Ich hoffe, Sie haben gelernt, wie Sie eine YouTube-Videoliste nach Schl\u00fcsselw\u00f6rtern in JavaScript erhalten. Bitte teilen Sie Ihre Gedanken und Vorschl\u00e4ge im Kommentarbereich unten mit.<\/p>\n<h4>Zum Thema passende Artikel<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/youtube-api-so-erhalten-sie-eine-liste-der-youtube-videos-ihres-kanals\/\" title=\"YouTube API \u2013 So erhalten Sie eine Liste der YouTube-Videos Ihres Kanals\">YouTube API \u2013 So erhalten Sie eine Liste der YouTube-Videos Ihres Kanals<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/so-erhalten-sie-youtube-video-tags-mit-der-youtube-api\/\" title=\"So erhalten Sie YouTube-Video-Tags mithilfe der YouTube-API\">So erhalten Sie YouTube-Video-Tags mithilfe der YouTube-API<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/so-verwenden-sie-die-youtube-api-zum-hochladen-von-videos-auf-dem-youtube-kanal\/\" title=\"So verwenden Sie die YouTube-API zum Hochladen von Videos auf dem YouTube-Kanal\">So verwenden Sie die YouTube-API zum Hochladen von Videos auf dem YouTube-Kanal<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Aufnahmequelle:  <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 diesem Artikel untersuchen wir, wie Sie mithilfe der YouTube-Such-API und JavaScript YouTube-Videos nach Schl\u00fcsselw\u00f6rtern abrufen. Wir werden auch Paginierung hinzuf\u00fcgen, um zu erhalten<\/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":[244],"tags":[845],"class_list":["post-25923","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-3","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/25923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=25923"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/25923\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/20180"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=25923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=25923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=25923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}