Youtube Video

This page introduces a reusable and responsive YouTube component built with the popular react-youtube library and styled using Tailwind CSS. Designed for both Next.js and React.js projects, this component allows you to embed YouTube videos effortlessly while keeping your code clean and your layout consistent across all devices.

Whether you're building a blog, portfolio, or video-rich application, this solution helps you deliver a smooth viewing experience with minimal setup.

Youtube Video preview

1. Setup codes

Install the react-youtube lib

bash
npm install react-youtube
or
yarn add react-youtube

Create a new file components/ui/YoutubeVideo.tsx

jsx
"use client";

import React from "react";
import YouTube from "react-youtube";

const YoutubeVideo = ({ youtubeVideoId }: { youtubeVideoId: string }) => {
  return (
    <YouTube
      videoId={youtubeVideoId}
      opts={{
        height: "100%",
        width: "100%",
      }}
      style={{ width: "100%", height: "100%" }}
    />
  );
};

export default YoutubeVideo;

2. Usages

2.1 Single video

First you need the Youtube video id, you can get the id from the your Youtube video url, like this:

Now you just add the id into the YoutubeVideo component like (don't forget add height for container outside of YoutubeVideo component):

jsx
import React from "react";
import YoutubeVideo from "@/components/ui/YoutubeVideo";

const DocYoutubeVideo = () => {
  return (
    <div className="h-[400px]">
      <YoutubeVideo youtubeVideoId="zueoghhiSP0" />
    </div>
  );
};

export default DocYoutubeVideo;

The UI like that

2.2 List videos

You can show the list of Youtube videos like that (you can refer my ItemGrid component)

jsx
<ItemGrid>
  <YoutubeVideo youtubeVideoId="zueoghhiSP0" />
  <YoutubeVideo youtubeVideoId="bOwUbd9co4o" />
  <YoutubeVideo youtubeVideoId="kolLdSiVhsQ" />
  <YoutubeVideo youtubeVideoId="GIJIPHWb5Jo" />
</ItemGrid>

The UI like that

2.3 Bonus - How to get Youtube Thumbnail Image

jsx
<div className="aspect-h-9 aspect-w-16 relative w-full">
  <Image
    alt={`video ${videoId}`}
    src={`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`}
    className="pointer-events-none object-cover group-hover:opacity-75"
    layout="fill"
    objectFit="cover"
  />
</div>

The UI like that

You can change the "maxresdefault" value on the src prop to change resolution of image:

• default
• mqdefault
• hqdefault
• sddefault
• maxresdefault