Skip to content

Alles für WordPress, Webentwicklung — und mehr

📺 So erhalten Sie Videos aus einer YouTube-Playlist per API: funktionierender Code in 15 Minuten
WebentwicklungWordPress
8 Min1,519 Wörter

📺 So erhalten Sie Videos aus einer YouTube-Playlist per API: funktionierender Code in 15 Minuten

Sie haben einen YouTube-Videolink in den Editor eingefügt, und es funktioniert. Wenn Sie jedoch eine ganze Playlist auf Ihrer Website benötigen, die automatisch neue Videos übernimmt, wird das manuelle Kopieren der Links jedes Mal zur lästigen Pflicht.

Ein Skript in PHP mit der YouTube Data API v3 löst das Problem vollständig: Es ruft alle Videos aus einer beliebigen öffentlichen Playlist ab, gibt JSON zurück, und Sie zeigen sie nach Belieben an, als Kartenraster, Liste oder Galerie. Die Einrichtung dauert 15 Minuten, Sie benötigen lediglich einen API-Schlüssel und grundlegende PHP-Kenntnisse.

Nachfolgend finden Sie funktionierenden Code für WordPress mit Fehlerbehandlung, Paginierung und Caching. Der Ansatz ist universell: Er funktioniert in jedem PHP-Projekt, nicht nur in WP.

💡 Kurzer Überblick:

  • Erstellen Sie einen API-Schlüssel in der Google Cloud Console und verknüpfen Sie ihn mit der YouTube Data API v3
  • Senden Sie eine Anfrage an playlistItems und erhalten Sie JSON mit allen Playlist-Videos
  • Verarbeiten Sie die Antwort, sammeln Sie Thumbnails und Links, zeigen Sie sie in einem Raster auf der Seite an
  • Fügen Sie Paginierung für Playlists mit mehr als 50 Videos und Caching via set_transient() hinzu

Schritt 1: Einen YouTube Data API v3-Schlüssel erstellen

Ein API-Schlüssel identifiziert Ihre Anwendung gegenüber YouTube und erfasst Kontingente. Die Erstellung ist kostenlos, das Tageslimit beträgt 10.000 Einheiten. Ein Schlüssel ist für die meisten Websites mehr als ausreichend.

Gehen Sie mit Ihrem Google-Konto zur Google Cloud Console. Erstellen Sie ein neues Projekt, die Projektauswahl-Schaltfläche befindet sich in der oberen Leiste, dann Neues Projekt. Benennen Sie es aussagekräftig, zum Beispiel my-youtube-feed.

Nachdem Sie das Projekt erstellt haben, gehen Sie zu APIs & Dienste → Bibliothek. Geben Sie in der Suchleiste YouTube Data API v3 ein und klicken Sie auf Aktivieren. Ohne diesen Schritt wird der Schlüssel nicht mit der richtigen API verknüpft, und Anfragen geben 403 zurück.

Nun zum Schlüssel selbst. Öffnen Sie im Seitenmenü Anmeldedaten, klicken Sie auf Anmeldedaten erstellen → API-Schlüssel. Das System generiert einen Schlüssel und zeigt ihn in einem modalen Fenster an. Kopieren Sie ihn sofort: Nach dem Schließen des Fensters ist der Schlüssel in der Liste sichtbar, sein Wert wird jedoch teilweise verborgen.

Klicken Sie unbedingt auf Schlüssel einschränken. Wählen Sie im Abschnitt API-Einschränkungen YouTube Data API v3 aus, dann funktioniert der Schlüssel nicht für andere APIs, selbst wenn er in ein öffentliches Repository gelangt. Für die lokale Entwicklung kann der HTTP-Referrer leer bleiben.

Der Schlüssel sieht aus wie AIzaSyD-.... Speichern Sie ihn in wp-config.php via define('YOUTUBE_API_KEY', '...') und fügen Sie wp-config.php zu .gitignore hinzu. Hinterlegen Sie den Schlüssel nicht hartcodiert im Theme-Code.

Schritt 2: Videos aus einer Playlist abrufen

Für die Anfrage benötigen Sie zwei Dinge: einen API-Schlüssel und eine Playlist-ID. Die ID wird aus der URL extrahiert: Öffnen Sie die Playlist auf YouTube, kopieren Sie die Adresszeile. Der Parameter list= in der URL ist die Playlist-ID: zum Beispiel PLp0YhAQYkolGq1e6r1m5....

Grundlegende PHP-Anfrage an den Endpunkt playlistItems:

1$api_key     = 'AIzaSy...';          // your key from step 1
2$playlist_id = 'PLp0YhAQYkolG...';   // playlist ID from URL
3 
4$api_url = 'https://www.googleapis.com/youtube/v3/playlistItems' .
5    '?part=snippet' .
6    '&maxResults=50' .
7    '&playlistId=' . urlencode($playlist_id) .
8    '&key=' . $api_key;
9 
10$response = file_get_contents($api_url);
11$data     = json_decode($response, true);
12 
13if (json_last_error() !== JSON_ERROR_NONE) {
14    die('JSON parsing error: ' . json_last_error_msg());
15}

Was hier passiert. part=snippet fordert Basisdaten an: Titel, Beschreibung, Thumbnail, Position in der Playlist. Für einen vollständigen Satz können Sie snippet,contentDetails,status angeben. maxResults=50 ist das Maximum pro Anfrage, die API gibt standardmäßig 5 Datensätze zurück, daher ist es besser, den Parameter explizit anzugeben. Kodieren Sie playlistId via urlencode() für den Fall von Sonderzeichen.

Ersetzen Sie für den Produktiveinsatz file_get_contents() durch wp_remote_get() (in WordPress) oder cURL mit Timeout. Ein direkter Aufruf schlägt fehl, wenn Google vorübergehend nicht erreichbar ist oder das Netzwerk langsam ist. Hier eine Version mit HTTP-Fehlerbehandlung:

1$response = wp_remote_get($api_url, [
2    'timeout' => 15,
3    'headers' => ['Accept' => 'application/json'],
4]);
5 
6if (is_wp_error($response)) {
7    error_log('YouTube API error: ' . $response->get_error_message());
8    return [];
9}
10 
11$http_code = wp_remote_retrieve_response_code($response);
12if ($http_code !== 200) {
13    error_log('YouTube API HTTP ' . $http_code);
14    return [];
15}
16 
17$body = wp_remote_retrieve_body($response);
18$data = json_decode($body, true);

Zwei Prüfebenen: Zuerst fängt is_wp_error() Netzwerkfehler ab, dann überprüfen wir den HTTP-Code. Wenn etwas schiefgeht, geben wir ein leeres Array zurück, die Website stürzt nicht ab.

Schritt 3: Die Videoliste auf einer Seite anzeigen

Die API gibt ein items-Array zurück. Jedes Element ist ein Playlist-Video. Antwortstruktur:

1{
2  "items": [
3    {
4      "snippet": {
5        "title": "Video title",
6        "description": "Description...",
7        "thumbnails": {
8          "default":  { "url": "https://i.ytimg.com/.../default.jpg" },
9          "medium":   { "url": "https://i.ytimg.com/.../mqdefault.jpg" },
10          "high":     { "url": "https://i.ytimg.com/.../hqdefault.jpg" }
11        },
12        "resourceId": {
13          "videoId": "dQw4w9WgXcQ"
14        }
15      }
16    }
17  ]
18}

Ein Video wird durch resourceId.videoId identifiziert. Daraus wird der Link https://www.youtube.com/watch?v=<videoId> zusammengesetzt. Thumbnails befinden sich in thumbnails in drei Auflösungen: Für ein Kartenraster nehmen Sie medium, für eine kompakte Liste default.

Ausgabecode für WordPress, Shortcode oder Seitenvorlage:

1if (! empty($data['items'])) {
2    echo '<div class="yt-playlist-grid">';
3 
4    foreach ($data['items'] as $item) {
5        $title     = esc_html($item['snippet']['title']);
6        $video_id  = esc_attr($item['snippet']['resourceId']['videoId']);
7        $thumbnail = esc_url($item['snippet']['thumbnails']['medium']['url']);
8        $link      = 'https://www.youtube.com/watch?v=' . $video_id;
9 
10        printf(
11            '<a href="%s" class="yt-card" target="_blank" rel="noopener">'
12            . '<img src="%s" alt="%s" loading="lazy">'
13            . '<span>%s</span></a>',
14            $link, $thumbnail, $title, $title
15        );
16    }
17 
18    echo '</div>';
19}

Drei Dinge, die Debugging-Zeit sparen:

  • loading="lazy". Bei 50 Videos auf einer Seite ohne Lazy Loading sinkt der PageSpeed. Das Attribut weist den Browser an: Lade das Bild erst, wenn zu ihm gescrollt wird.
  • esc_html()** und esc_url().** Obligatorische Bereinigung für WordPress. Videotitel enthalten manchmal Anführungszeichen und HTML-Entitäten, ohne Escaping zerstören sie das Layout.
  • target="_blank"** mit rel="noopener".** Öffnet YouTube in einem neuen Tab, gewährt aber keinen Zugriff auf window.opener, Schutz vor Tab-Napping.

CSS für das Raster, minimal, für ein Standard-Theme:

1.yt-playlist-grid {
2    display: grid;
3    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
4    gap: 20px;
5}
6.yt-card {
7    text-decoration: none;
8    color: inherit;
9    border-radius: 8px;
10    overflow: hidden;
11    transition: transform 0.2s;
12}
13.yt-card:hover {
14    transform: translateY(-2px);
15}
16.yt-card img {
17    width: 100%;
18    aspect-ratio: 16 / 9;
19    object-fit: cover;
20}
21.yt-card span {
22    display: block;
23    padding: 10px;
24    font-weight: 600;
25    font-size: 14px;
26}

Das Raster passt sich automatisch der Bildschirmbreite an: auto-fill + minmax(280px, 1fr) ergeben ohne Media Queries eine bis mehrere Spalten.

Schritt 4: Paginierung, Kontingente und häufige Fehler

Paginierung. Eine Anfrage gibt maximal 50 Videos zurück. Wenn mehr in der Playlist sind, erscheint ein Feld nextPageToken in der Antwort. Übergeben Sie es in der nächsten Anfrage, die API liefert die nächste Seite. Schleife:

1$all_items  = [];
2$page_token = null;
3 
4do {
5    $url = $api_url . '&pageToken=' . urlencode($page_token ?? '');
6    // ... API request ...
7    $all_items  = array_merge($all_items, $data['items'] ?? []);
8    $page_token = $data['nextPageToken'] ?? null;
9} while ($page_token && count($all_items) < 500);

Die Schleife stoppt bei 500 Videos, eine vernünftige Obergrenze für eine Website-Seite. Ohne Begrenzung riskieren Sie, das gesamte Kontingent in wenigen Ladevorgängen aufzubrauchen.

Kontingente. Jeder playlistItems.list-Aufruf kostet 1 Kontingenteinheit, dies wird durch die offizielle Kontingenttabelle von Google bestätigt. Das Tageslimit beträgt 10.000 Einheiten. Das sind 10.000 Anfragen pro Tag, mehr als genug für die allermeisten Websites. Wenn die Playlist jedoch häufig aktualisiert wird, fügen Sie Caching hinzu:

1$cache_key   = 'yt_playlist_' . md5($playlist_id);
2$cached_data = get_transient($cache_key);
3 
4if ($cached_data !== false) {
5    return $cached_data;
6}
7 
8// ... API request ...
9 
10set_transient($cache_key, $data, HOUR_IN_SECONDS * 6);

Sechs Stunden sind ein vernünftiger Kompromiss zwischen Aktualität und Kontingentschonung. Für unkritische Playlists setzen Sie 12-24 Stunden. get_transient() und set_transient() sind native WordPress-Funktionen, sie arbeiten mit Object Cache (Redis/Memcached), sofern konfiguriert, andernfalls schreiben sie in wp_options.

Häufige Fehler und was zu tun ist:

  • 403 Forbidden. Die API ist für das Projekt in der Google Cloud Console nicht aktiviert. Gehen Sie zurück zu Schritt 1: Die Schaltfläche Aktivieren für YouTube Data API v3 muss geklickt sein. Prüfen Sie auch, ob in den Schlüsseleinstellungen eine IP-Einschränkung besteht.
  • 400 Bad Request, „API key not valid". Der Schlüssel wurde gerade erstellt und ist noch nicht aktiv. Warten Sie 2-5 Minuten: API-Einschränkungen werden nicht sofort wirksam.
  • 404 Not Found. Ungültige Playlist-ID oder die Playlist ist privat. Ein API-Schlüssel gibt nur öffentliche und nicht gelistete Playlists zurück. Private erfordern eine OAuth-Autorisierung.
  • Leeres items Array bei gültiger ID. Höchstwahrscheinlich ist die Playlist leer. Öffnen Sie die Playlist-URL in einem Browser und stellen Sie sicher, dass Videos vorhanden sind.

💻 Video: YouTube Data API v3 in Aktion

Ein kurzes Video zum Thema, zeigt visuell den gesamten Prozess von der Schlüsselerstellung bis zur Anzeige einer Videoliste:

⁉️🤔 Häufig gestellte Fragen

Funktioniert die API mit privaten Playlists?

Nein. playlistItems.list mit einem API-Schlüssel gibt nur öffentliche und nicht gelistete Playlists zurück. Für private benötigen Sie eine OAuth-Autorisierung: Der Nutzer muss Ihrer Anwendung explizit Zugriff auf sein Konto gewähren. Für eine öffentliche Aggregator-Website reicht ein API-Schlüssel.

Kann ich Videos aus der Playlist einer anderen Person abrufen?

Ja, wenn die Playlist öffentlich ist. Ein API-Schlüssel ist nicht an den Playlist-Eigentümer gebunden, er identifiziert Ihre Anwendung, nicht den YouTube-Nutzer. Jede öffentliche Playlist ist per ID zugänglich, unabhängig davon, wer sie erstellt hat.

Wie erhalte ich mehr als 50 Videos auf einmal?

Das ist nicht möglich, es handelt sich um ein hartes Limit von maxResults für playlistItems, festgelegt in der Dokumentation von Google. Verwenden Sie Paginierung via nextPageToken (Schritt 4). Für eine Playlist mit 300 Videos benötigen Sie 6 sequenzielle Anfragen, die zusammen 6 von 10.000 täglichen Kontingenteinheiten verbrauchen.

Warum werden Video-Thumbnails nicht angezeigt?

Prüfen Sie die URL in thumbnails: Das Feld heißt url, nicht link und nicht src. Zweiter Grund: Werbeblocker schneiden manchmal die Domain i.ytimg.com ab. Drittens: Einige alte Videos (vor 2010) haben keine hochauflösenden Thumbnails, nehmen Sie default, das ist immer vorhanden.

Was tun, wenn der Schlüssel kompromittiert ist?

Gehen Sie sofort zur Google Cloud Console → Anmeldedaten, suchen Sie den Schlüssel und klicken Sie auf Löschen. Erstellen Sie einen neuen. Der alte Schlüssel wird innerhalb von 5 Minuten deaktiviert. Speichern Sie den Schlüssel via define('YOUTUBE_API_KEY', '...') in wp-config.php und schließen Sie diese Datei via .gitignore vom Repository aus.

Wenn eine statische Playlist via iframe für die Website ausreicht, benötigen Sie die API nicht, YouTube stellt fertigen Einbettungscode bereit. Sobald Sie jedoch automatisch neue Videos übernehmen, nach Datum filtern, das Layout anpassen oder Thumbnails in einem nicht standardmäßigen Design anzeigen müssen, wird die API zur einzigen funktionierenden Option.

Für eine WordPress-Website beseitigt die Kombination wp_remote_get() + set_transient() Kontingent- und Geschwindigkeitsbedenken vollständig: Einmal alle paar Stunden ruft das Skript JSON ab, speichert es zwischen, und das Frontend arbeitet sofort mit dem Cache. Die Playlist aktualisiert sich selbst, der Redakteur muss nichts anklicken.

Wenn Ihr Theme benutzerdefiniertes PHP in Vorlagen unterstützt, nehmen Sie den Code aus Schritt 3, ändern Sie das CSS entsprechend Ihrem Design. Wenn Sie einen Page Builder verwenden, verpacken Sie die PHP-Logik in einen Shortcode und fügen Sie ihn überall via [youtube_playlist id="PLp0..."] ein.

Probieren Sie es mit einer Playlist aus: 15 Minuten für einen Schlüssel und die erste Anfrage, und Sie werden sehen, ob der Ansatz für Ihre Aufgabe funktioniert. Und falls Sie die API bereits für andere Zwecke genutzt haben, schreiben Sie in die Kommentare, welcher Endpunkt sich als der nützlichste erwiesen hat.

Redaktion
RedaktionRedaktionsteam→ All publications

Ein professionelles Team von Autoren und Redakteuren, das auf die Erstellung hochwertiger Inhalte spezialisiert ist.