How To Embed YouTube Videos Using RSS Feed
If you're curious about how to embed YouTube videos from your channel or playlist on your website or personal portfolio, check out this four-step tutorial.
Vaishnav Chandurkar
Jun 28, 2024 • 4 min read
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?
- Visit the channel home page. ex: https://www.youtube.com/@peerlistHQ
- Go to the About section, scroll down to the Stats section.
- 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