How To Embed YouTube Videos Using RSS Feed

We wanted to introduce YouTube integration with your Peerlist profile for a very long time. After multiple POCs, we realized that fetching videos via RSS feed is the most efficient and effective way to go ahead.

In this tutorial, I'll guide you through a simple process of how to embed your favorite YouTube videos on your personal portfolio or website. Let's get started with these four simple steps.

You can embed all videos from a channel or from a specific playlist. Depending on that:

Step 1: Get a YouTube Channel ID or Playlist ID

How to find YouTube Playlist ID?

You can easily get playlistId directly from the playlist URL

Here's the sample URL: https://www.youtube.com/watch?v=lxsdHfjRfY8&list=PLoa864sF4gBmwd50ZLZFfzV0IZXFm_q7W

The "list=" parameter is followed by PLoa864sF4gBmwd50ZLZFfzV0IZXFm_q7W as the playlist ID.

How to find the YouTube channel's channel ID?

1. Visit the channel home page. ex: https://www.youtube.com/@peerlistHQ
2. Go to the About section, scroll down to the Stats section.
3. Click the Share button below. Click on the Copy channel ID.

You will get a channel ID something like this UCT5jsrerQIrgFhjscRM5TTA

Step 2: Create a YouTube RSS URL for Your Content

Now that you have the ChannelID or Playlist ID, you can create a YouTube RSS URL. The format for these URLs is as follows:

For Channels: https://www.youtube.com/feeds/videos.xml?channel_id={{YOUR_CHANNEL_ID}}

For Playlists: https://www.youtube.com/feeds/videos.xml?playlist_id={{YOUR_PLAYLIST_ID}}

Replace "YOUR_CHANNEL_ID" or "YOUR_PLAYLIST_ID" with the respective ID you obtained in Step 1. This URL will point to the RSS feed for your selected channel or playlist.

If you visit the RSS URL, you will get something like this

<feed xmlns:yt="http://www.youtube.com/xml/schemas/2015" xmlns:media="http://search.yahoo.com/mrss/" xmlns="http://www.w3.org/2005/Atom">
  <link rel="self" href="http://www.youtube.com/feeds/videos.xml?playlist_id=PLoa864sF4gBmwd50ZLZFfzV0IZXFm_q7W"/>
  <id>yt:playlist:PLoa864sF4gBmwd50ZLZFfzV0IZXFm_q7W</id>
  <yt:playlistId>PLoa864sF4gBmwd50ZLZFfzV0IZXFm_q7W</yt:playlistId>
  <yt:channelId>UCT5jsrerQIrgFhjscRM5TTA</yt:channelId>
  <title>What's New with Peerlist</title>
  <author>
    <name>Peerlist</name>
    <uri>https://www.youtube.com/channel/UCT5jsrerQIrgFhjscRM5TTA</uri>
  </author>
  <published>2023-02-14T11:14:11+00:00</published>
  <entry>
  ... // RSS content entry
  </entry>
  <entry>
  ... // RSS content entry
  </entry>
  <entry>
  ... // RSS content entry
  </entry>
</feed>

Now we need to parse this data for the required fields.

Step 3: Integrate YouTube Content into Your Portfolio

To parse RSS XML data we can use rss-parser. A small library for turning RSS XML feeds into JavaScript objects.

// /api/youtube
const Parser = require('rss-parser');
const parser = new Parser();

const youtubeRSSURL = 'YOUR_YOUTUBE_RSS_URL';

const handler = async (req, res) => {
	const feed = await parser.parseURL(youtubeRSSURL); // Replace with the URL from Step 2

	if (!feed || !feed.items.length) {
		return res.status(404).send({
			success: false,
			message: 'Could not fetch YouTube channel videos',
		});
	}

	res.send({
		success: true,
		feed,
	});
};

export default handler;

The rss-parser will parse the data present at the RSS URL and return the response as follows:

// JSON response from rss-parser
{
	"link": "http://www.youtube.com/feeds/videos.xml?playlist_id=PLoa864sF4gBmwd50ZLZFfzV0IZXFm_q7W",
	"feedUrl": "http://www.youtube.com/feeds/videos.xml?playlist_id=PLoa864sF4gBmwd50ZLZFfzV0IZXFm_q7W",
	"title": "What's New with Peerlist",
	"author": "Peerlist",
	"items": [
		{
			"title": "Peerlist Monthly Product Update - January 2023",
			"link": "https://www.youtube.com/watch?v=Rl9HHiic9rY",
			"pubDate": "2023-02-15T10:06:01.000Z",
			"author": "Peerlist",
			"id": "yt:video:Rl9HHiic9rY",
			"isoDate": "2023-02-15T10:06:01.000Z"
		},
		{
			"title": "Peerlist Product Update: March 2023",
			"link": "https://www.youtube.com/watch?v=ufa4Sz-hn3E",
			"pubDate": "2023-04-06T05:13:19.000Z",
			"author": "Peerlist",
			"id": "yt:video:ufa4Sz-hn3E",
			"isoDate": "2023-04-06T05:13:19.000Z"
		}
	]
}

Step 4: Render Data on UI with YouTube Embed

Once you have the JSON data from the RSS feed, you can render it on your UI.

// VideoList (ReactJs Component)
import { useEffect, useState } from 'react';

function VideoList() {
	const [youtube, setYoutube] = useState(null);

	useEffect(() => {
		async function fetchData() {
			const items = await axios.get('/api/youtube')
			setYoutube(items);
		}
		fetchData();
	}, []);

	// Function to convert video link to embed link
	const getYoutubeEmbedURL = (link) {
		// Extract video ID from the link
		const videoId = link.split('v=')[1];
		return `https://www.youtube.com/embed/${videoId}`;
	}

	return (
		<div>
			<div className='mb-6'>
				<p className='text-lg font-medium'>{youtube.author}</p>
			</div>
			{youtube.items?.length > 0 && (
				<ul className='grid grid-cols-2 gap-4'>
					{youtube.items.map((video) => {
						const embedURL = getYoutubeEmbedURL(video.link);

						return (
							<div
								key={video.id}
								className='rounded-lg bg-white hover:shadow border border-zinc-300 overflow-hidden'
							>
								<iframe
									src={embedURL}
									title={video.title}
									className='w-full h-64'
								/>
								<div className='p-4'>
									<p className='text-sm'>{video.title}</p>
								</div>
							</div>
						);
					})}
				</ul>
			)}
		</div>
	);
}

export default VideoList;

Please note: Don't forget to modify the CSS according to your design. The above code contains Tailwind CSS classes.

That's it! You now have a basic setup to fetch and embed YouTube videos from a channel or playlist using a YouTube RSS feed. If you've any questions or feedback, you can DM me. You can find me here on Peerlist → Vaishnav