How to insert a responsive YouTube Video to react using Tailwind CSS

In this tutorial, we'll walk you through the process of embedding a responsive YouTube video into a React application while using the popular CSS framework, Tailwind CSS. By the end of this guide, you'll have a sleek and responsive YouTube video player integrated into your React project.

In Short:

Here is a component that contains a responsive YouTube video by using the style from tailwind aspect-video.

<div className=' aspect-video ' >
    <iframe 
        className=' h-full w-full rounded-lg'
        src="https://www.youtube.com/embed/4WiH9pf2ULQ?si=2TzjHgKzRDOgi528" 
        width="100%" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> 
     </iframe>
</div> 

Preview

Setup React & Tailwind CSS

The following for setting up react project with tailwind CSS

Step1: Create a React Project

if you don't have a React project set up, you can create one using create-react app:

npx create-react-app youtube-video-embed
cd youtube-video-embed
npm start

Step2: Install Tailwind CSS

To use Tailwind CSS in your React project, install it by running the following command:

npm install tailwindcss

Once it's installed, you'll need to create a configuration file:

npx tailwindcss init

Step 3: Configure Tailwind CSS

Open the tailwind.config.js file generated in your project root and update it to include the following:

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Step 4: Embed the YouTube Video:

In your React Project, create a new component that will display the YouTube video
For example YouTubeEmbed.js

import React from 'react';

const YouTubeEmbed = ({ embedId }) => {
  return (
    <div className="aspect-w-16 aspect-h-9">
      <iframe
        className="w-full h-full"
        src={`https://www.youtube.com/embed/${embedId}`}
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
      ></iframe>
    </div>
  );
};

export default YouTubeEmbed;

Congratulations! You've successfully embedded a responsive YouTube video into your React application using Tailwind CSS. You can further customize the appearance and styling of the video player by modifying the Tailwind CSS classes in the YouTubeEmbed component to match your project's design.