Quick Guide: Embedding YouTube Videos in Your React App

Welcome to our quick guide on embedding responsive YouTube videos in your React app!

In this tutorial, we’ll walk you through the process of seamlessly integrating YouTube videos into your React application while ensuring a responsive design that adapts to various screen sizes.

Let’s get started!

Method 1: Effortless Embedding of Responsive YouTube Videos in React App

This method will guide you through the process of creating a responsive YouTube video embed component in a React application using Styled Components.

So here are the steps for effortlessly embedding responsive YouTube videos in your React app:

Step 1: Setting Up Styled Components

In the provided code snippet, we define a ResponsiveVideoWrapper styled component to create a container with a padding-bottom of 56.25%.

This clever use of padding ensures the aspect ratio is maintained, allowing the video to scale gracefully.

import styled from 'styled-components';


const ResponsiveVideoWrapper = styled.div`
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
`;

Step 2: Building the Iframe Component

Within the wrapper, we embed the YouTube video using another styled component, StyledIframe.

This absolute-positioned iframe fills the entire container, adapting to the specified aspect ratio. The video source (src) is dynamically generated using the passed embedId prop.

import styled from 'styled-components';

const StyledIframe = styled.iframe`
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
`;

Step 3: Creating the ResponsiveYoutube Component

The ResponsiveYoutube functional component utilizes the styled components to encapsulate the video embed logic.

The embedId prop allows for dynamic rendering of different YouTube videos based on the parent component’s input.

const ResponsiveYoutube = ({ embedId }) => {
  return (
    <>
      <ResponsiveVideoWrapper>
        <StyledIframe
          width="853"
          height="480"
          src={`https://www.youtube.com/embed/${embedId}`}
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
          title="Video Player"
        />
      </ResponsiveVideoWrapper>
    </>
  );
};

Step 4: Integration in Parent Component

To utilize this responsive YouTube component, simply import it into your parent React component and pass the desired video’s ID as the embedId prop. For example:

<ResponsiveYoutube embedId='KLuTLF3x9sA' />

Component in Action

ResponsiveYoutube.jsx

import React from "react";
import styled from 'styled-components';


const ResponsiveVideoWrapper = styled.div`
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
`;

const StyledIframe = styled.iframe`
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
`;

const ResponsiveYoutube = ({ embedId }) => {
  return (
    <>
      <ResponsiveVideoWrapper>
        <StyledIframe
          width="853"
          height="480"
          src={`https://www.youtube.com/embed/${embedId}`}
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
          title="Video Player"
        />
      </ResponsiveVideoWrapper>
    </>
  );
};

export default ResponsiveYoutube;

App.jsx

import ResponsiveYoutube from './Components/ResponsiveYoutube';

function App() {
  return (
    <>
      <ResponsiveYoutube embedId='KLuTLF3x9sA' />
    </>
  );
}

export default App;

Output:

Method 2: Responsive Video Embeds in React with CSS aspect-ratio

This method will guide you through the process of leveraging the aspect-ratio CSS property to effortlessly implement responsive video embeds in a React application.

Implementing aspect-ratio with Styled Components:

In the provided code snippet, we utilize Styled Components to implement the aspect-ratio property seamlessly.

The StyledIframe component, representing the embedded YouTube video, is styled with aspect-ratio: 16 / 9;. This concise and elegant approach ensures that the video maintains a 16:9 aspect ratio, a standard for YouTube videos.

import styled from 'styled-components';


const StyledIframe = styled.iframe`
  aspect-ratio: 16 / 9;
  width: 100%;
`;

Creating the Responsive EmbedVideo Component:

The functional component EmbedVideo encapsulates the logic for embedding YouTube videos.

The embedId prop allows dynamic rendering of different videos based on the parent component’s input.

The StyledIframe within this component inherits the aspect-ratio styling, facilitating responsive video embedding with minimal code.

const EmbedVideo = ({ embedId }) => {
  return (
    <>
        <StyledIframe
          src={`https://www.youtube.com/embed/${embedId}`}
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
          title="Video Player"
        />
    </>
  )
}

export default EmbedVideo

Integration in Parent Component:

To incorporate this responsive video component into your React application, import the EmbedVideo component and pass the desired video’s ID as the embedId prop, as demonstrated below:

<EmbedVideo embedId='KLuTLF3x9sA' />

Component in Action

EmbedVideo.jsx

import React from 'react'
import styled from 'styled-components';


const StyledIframe = styled.iframe`
  aspect-ratio: 16 / 9;
  width: 100%;
`;


const EmbedVideo = ({ embedId }) => {
  return (
    <>
        <StyledIframe
          src={`https://www.youtube.com/embed/${embedId}`}
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
          title="Video Player"
        />
    </>
  )
}

export default EmbedVideo

App.jsx

import EmbedVideo from './Components/EmbedVideo';

function App() {
  return (
    <>
			<EmbedVideo embedId='KLuTLF3x9sA'/>
    </>
  );
}

export default App;

Output:

Benefits of aspect-ratio:

• Effortless responsiveness: Maintain a consistent width-to-height ratio, adapting to various screen sizes.
• Simplified styling: Achieve responsive design with a single line of CSS.
• Compatibility: Utilize a modern CSS property supported by contemporary browsers (check compatibility here).

Method 3: Elevating React Video Embeds with react-youtube

This method will guide you through the utilization of the react-youtube library, offering a seamless integration of YouTube videos into your React applications.

Let’s dive into the features and customization options provided by the library.

Library Overview:

• NPM Package: react-youtube
• GitHub Page: tjallingt/react-youtube

Understanding react-youtube:

The react-youtube library simplifies the process of embedding YouTube videos in React applications by providing a versatile YouTube component.

This component accepts various props, allowing developers to customize the video player and bind events to it.

Key Props for Customization:

• videoId: Specifies the YouTube video ID to be played.
• id: Specifies the ID of the YouTube element.
• className: Specifies the class name of the YouTube element.
• iframeClassName: Specifies the class name of the iframe element that embeds the video player.
• style: Specifies the inline styles of the YouTube element.
• title: Specifies the title of the video.
• loading: Specifies the loading message to be displayed while the video player is loading.
• opts: Specifies player options such as the width, height, and other parameters.
• Event handling props like onReady, onPlay, onPause, onEnd, onError, onStateChange, onPlaybackRateChange, and onPlaybackQualityChange.

Player Parameters: Explore the Player Parameters provided by the YouTube API to further customize the behavior of the embedded video player.

Implementing Responsive Embeds:

The provided code snippet showcases the integration of react-youtube for responsive video embedding.

The ResponsiveEmbedYoutube component accepts a videoId prop and utilizes the opts object to configure player options, ensuring a seamless and dynamic video presentation.

ResponsiveEmbedYoutube.jsx

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

const opts = {
    aspectratio: 16 / 9,
    width: "100%",

  playerVars: {
    autoplay: 1,
},
};



const ResponsiveEmbedYoutube = ({ videoId}) => {
  return (
    <div>
        <YouTube videoId={videoId} opts={opts} frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;" allowfullscreen />
    </div>
  );
};

export default ResponsiveEmbedYoutube;

Integration in Parent Component:

To incorporate this responsive YouTube video component into your React application, import the ResponsiveEmbedYoutube component and pass the desired video’s ID as the videoId prop, as demonstrated below:

App.js

import ResponsiveEmbedYoutube from './Components/ResponsiveEmbedYoutube';

function App() {
  return (
    <>

			<ResponsiveEmbedYoutube videoId='KLuTLF3x9sA'/>
    </>
  );
}

export default App;

Output:

Method 4: Creating Seamless Video Experiences in React with react-player

In this method, we’ll explore the versatility of the react-player library, which simplifies the process of embedding YouTube videos in React applications.

Let’s delve into the features and customization options offered by the library.

Library Overview:

• NPM Package: react-player
• GitHub Page: cookpete/react-player
• Website URL: cookpete.com/react-player

Understanding react-player:

The react-player library, maintained by cookpete, provides a straightforward solution for embedding and controlling various types of media, including YouTube videos, in React applications.

The library is highly configurable and supports a wide range of media sources.

Key Features:

Cross-platform Compatibility: react-player seamlessly integrates with various media platforms, ensuring cross-platform compatibility.
Responsive Design: The provided code snippet demonstrates a responsive video player that adapts to different screen sizes.
Customizable Thumbnails: The library allows you to set custom thumbnail images, enhancing the visual appeal of your video player.

Implementation with Styled Components:

In the code snippet, the WebVideoPlayer component is styled using Styled Components.

The PlayerWrapper ensures a responsive aspect ratio for the video player. The ReactPlayer component within utilizes various props, including url, playing, width, and height, providing a clean and readable implementation.

WebVideoPlayer.jsx

import React from "react";
import ReactPlayer from "react-player/youtube";
import styled from "styled-components";

const PlayerWrapper = styled.div`
  position: relative;
  padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */

  .responsive-player {
    position: absolute;
    top: 0;
    left: 0;
  }
`;

const WebVideoPlayer = ({ videoUrl, thumbnailSrc, thumbnailAlt }) => {
  return (
    <>
      <PlayerWrapper>
        <ReactPlayer
          url={videoUrl}
          className="responsive-player"
          playing
          width="100%"
          height="100%"
          light={<img src={thumbnailSrc} alt={thumbnailAlt} />}
        ></ReactPlayer>
      </PlayerWrapper>
    </>
  );
};

export default WebVideoPlayer;

Integration in a React App:

The App.jsx provides an example of integrating the WebVideoPlayer component into a React application. By passing the videoUrl, thumbnailSrc, and thumbnailAlt props, developers can seamlessly embed and customize YouTube videos in their projects.

App.jsx

import WebVideoPlayer from './Components/WebVideoPlayer';

function App() {
  const videoUrl = 'https://www.youtube.com/watch?v=KLuTLF3x9sA';
  const thumbnailSrc =
    'https://i3.ytimg.com/vi/KLuTLF3x9sA/maxresdefault.jpg';
  const thumbnailAlt = 'Video Thumbnail Alt Text';
  return (
    <>
      <WebVideoPlayer
        videoUrl={videoUrl}
        thumbnailSrc={thumbnailSrc}
        thumbnailAlt={thumbnailAlt}
      />
    </>
  );
}

export default App;

Conclusion

As you embark on your journey to enhance your React applications with video content, consider the unique aspects of each method and how they align with your development preferences and project goals.

Whether you opt for the straightforward react-youtube integration, the CSS elegance of aspect-ratio, or the versatility of react-player, the key is to elevate user engagement through thoughtful and responsive multimedia design. Happy coding! 🚀🎬

Similar articles you may like

• React Context API for Beginners
• React Components – A Theoretical View
• JSX in React – For Absolute Beginners
• Creating a Customizable Drawer Component in React: A Step-by-Step Guide