Fetch YouTube Videos In WordPress Using the YouTube API

In this tutorial, we’ll show you how to fetch YouTube videos from a specific channel using the YouTube Data API and display them on your WordPress website. We’ll use a simple PHP code snippet that makes an API request to get videos from a channel and display them in a custom WordPress template or widget.

In this guide, we’ll walk you through the steps of using the YouTube Data API to fetch YouTube videos and display them on your WordPress site.

Steps:

Step 1: Create a Project on Google Cloud Platform (GCP)

1. Go to the Google Cloud Console.
2. Click on “Select a Project” at the top and then click “New Project.”
3. Name your project and click “Create.”

Step 2: Enable YouTube Data API v3

1. In the Google Cloud Console, go to APIs & Services > Library.
2. Search for “YouTube Data API v3” and select it.
3. Click Enable to activate the API for your project.

Step 3: Create API Key

1. Go to APIs & Services > Credentials.
2. Click on “Create Credentials” and select API Key.
3. Copy your API key for later use.

Step 4: Prepare Your Code

In WordPress, we can use the functions.php file of your theme or create a custom plugin to fetch the YouTube videos.

Here’s a basic code snippet to fetch YouTube videos from a specific channel:

function fetch_youtube_videos_list() {
    // Replace with your API Key and Channel ID
    $api_key = 'YOUR_API_KEY';
    $channel_id = 'YOUR_CHANNEL_ID'; // Channel ID of the YouTube channel

    // Build the URL for YouTube API
    $url = "https://www.googleapis.com/youtube/v3/search?key=$api_key&channelId=$channel_id&part=snippet,id&order=date&maxResults=10";

    // Make the API request
    $response = wp_remote_get($url);

    // Check if the request was successful
    if (is_wp_error($response)) {
        return 'Failed to fetch YouTube videos.';
    }

    // Decode the JSON response
    $videos = json_decode(wp_remote_retrieve_body($response), true);

    // Check if videos are available
    if (!empty($videos['items'])) {
        $output = '<div class="youtube-videos">';

        // Loop through the videos and display them
        foreach ($videos['items'] as $video) {
            $title = $video['snippet']['title'];
            $description = $video['snippet']['description'];
            $video_id = $video['id']['videoId'];
            $thumbnail = $video['snippet']['thumbnails']['high']['url'];

            // Display each video with title, description, and thumbnail
            $output .= '<div class="youtube-video">';
            $output .= '<a href="https://www.youtube.com/watch?v=' . esc_attr($video_id) . '" target="_blank">';
            $output .= '<img src="' . esc_url($thumbnail) . '" alt="' . esc_attr($title) . '" />';
            $output .= '<h4>' . esc_html($title) . '</h4>';
            $output .= '<p>' . esc_html($description) . '</p>';
            $output .= '</a>';
            $output .= '</div>';
        }

        $output .= '</div>';

        return $output; // Return the HTML output
    } else {
        return 'No videos found.';
    }
}

Step 5: Display YouTube Videos in WordPress
You can now call the fetch_youtube_videos_list() function within your WordPress theme or plugin.

Display Videos Using Shortcode You can create a simple shortcode to embed the YouTube videos wherever you want on your WordPress site. Add the following code to functions.php

function youtube_videos_shortcode_block() {
    return fetch_youtube_videos_list(); // Calls the function to get the videos
}
add_shortcode('youtube_videos_block', 'youtube_videos_shortcode_block');

Now, in your WordPress posts or pages, you can use the shortcode [youtube_videos_block] to display the fetched YouTube videos.

Step 6: Style Your Output

You can style the output with CSS to make the videos look nice on your site. Here’s an example of some simple CSS:

.youtube-videos {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.youtube-video {
    width: 30%;
    text-align: center;
}

.youtube-video img {
    max-width: 100%;
    height: auto;
}

.youtube-video h4 {
    font-size: 16px;
    margin: 10px 0;
}

.youtube-video p {
    font-size: 14px;
    color: #777;
}

You can add this CSS to your theme’s stylesheet (style.css) or via the WordPress Customizer.

Conclusion

By following these steps, you can easily fetch and display YouTube videos from a specific channel on your WordPress site using the YouTube Data API and PHP. You can use shortcodes or widgets to place the videos wherever you want, and customize the display with CSS. This is a simple and efficient way to bring dynamic content from YouTube to your WordPress site.