{"id":28009,"date":"2022-03-24T20:13:27","date_gmt":"2022-03-24T20:13:27","guid":{"rendered":"http:\/\/embed-a-youtube-player-into-a-react-app"},"modified":"2025-02-09T04:25:15","modified_gmt":"2025-02-09T12:25:15","slug":"embed-a-youtube-player-into-a-react-app","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/embed-a-youtube-player-into-a-react-app\/","title":{"rendered":"Embed a YouTube Player into a React App"},"content":{"rendered":"

YouTube<\/a> is a video-sharing platform owned by Google. The YouTube team offers an API that can be used to integrate the YouTube video playback experience into web applications.\nIn this post, we will go through the process of embedding a YouTube player in a React<\/a> application. We\u2019ll build a simple blog and use the react-youtube<\/code> package to embed a YouTube player in it. react-youtube<\/code> provides a React component that acts as an abstraction layer over the traditional YouTube IFrame Player API. Let\u2019s get started!<\/p>\n

Here is a link<\/a> to the demo on CodeSandbox.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

Project Setup<\/h2>\n

Run this command in your terminal to create a simple React application:<\/p>\n

    npx create-react-app youtube-player-demo\n<\/code><\/span><\/pre>\n
Next, navigate into the newly created directory and run the command below to install the dependencies we\u2019ll need for our app.<\/p>\n
    npm<\/span> install<\/span> react-youtube<\/span> react-router-dom<\/span>@6<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
After the installation, create a folder called components<\/code> in the \/src<\/code> directory to hold the application\u2019s components.<\/p>\n
Building the Blog<\/h2>\n
First, let\u2019s create a component called Home<\/code> that will serve as the index page and hold a list of all blog posts in the application. Create a file called Home.js<\/code> in the src\/components<\/code> folder and add the following to it:<\/p>\n
    import<\/span> React from<\/span> 'react'<\/span>;\n    import<\/span> { Link } from<\/span> 'react-router-dom'<\/span>;\n    export<\/span> default<\/span> function<\/span> Home<\/span>({ data }<\/span>) <\/span>{\n      return<\/span> (\n        <div<\/span> className<\/span>=\"cards\"<\/span>><\/span>\n          {data.posts.map((post) => (\n            <div<\/span> className<\/span>=\"card\"<\/span> key<\/span>={post.id}<\/span>><\/span>\n              <div<\/span> className<\/span>=\"img-wrapper\"<\/span>><\/span>\n                <img<\/span>\n                  src<\/span>={<\/span>`https:<\/span>\/\/ytimg.googleusercontent.com<\/span>\/vi<\/span>\/${\n                    post.url.split<\/span>('v<\/span>=')[1]\n                  }\/sddefault.jpg`}\n                  alt={post.title}\n                ><\/img>\n              <\/div>\n              <div>\n                <h3>{post.title}<\/h3>\n                <p>{post.content.slice(0, 100) + '<\/span>...<\/span>'}<\/p<\/span>><\/span>\n                <Link<\/span> to<\/span>={<\/span>`\/blog<\/span>\/${post.id<\/span>}`}><\/span>Learn more...<\/Link<\/span>><\/span>\n              <\/div<\/span>><\/span>\n            <\/div<\/span>><\/span>\n          ))}\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The Home<\/code> component accepts a data<\/code> prop and renders a list of blog post cards. Each card has an automatically generated YouTube video thumbnail, details about the post, and a link to the post\u2019s page.<\/p>\n
The file holds a JSON<\/code> object made up of an array of sample posts. Now replace the code in your App.js<\/code> file with the following:<\/p>\n
    import<\/span> { Routes, Route, Link } from<\/span> 'react-router-dom'<\/span>;\n    import<\/span> Home from<\/span> '.\/components\/Home'<\/span>;\n    import<\/span> BlogPost from<\/span> '.\/components\/BlogPost'<\/span>;\n    import<\/span> data from<\/span> '.\/data.json'<\/span>;\n    import<\/span> '.\/App.css'<\/span>;\n    function<\/span> App<\/span>(<\/span>) <\/span>{\n      return<\/span> (\n        <div<\/span> className<\/span>=\"App\"<\/span>><\/span>\n          <div<\/span>><\/span>\n            <Link<\/span> to<\/span>=\"\/\"<\/span>><\/span>\n              <h1<\/span>><\/span>React Blog<\/h1<\/span>><\/span>\n            <\/Link<\/span>><\/span>\n          <\/div<\/span>><\/span>\n          <main<\/span>><\/span>\n            <Routes<\/span>><\/span>\n              <Route<\/span> path<\/span>=\"\/\"<\/span> element<\/span>={<\/span><Home<\/span> data<\/span>={data}<\/span> \/><\/span>} \/>\n              <Route<\/span> path<\/span>=\"\/blogpost\/:id\"<\/span> element<\/span>={<\/span><BlogPost<\/span> data<\/span>={data}<\/span> \/><\/span>} \/>\n            <\/Routes<\/span>><\/span>\n          <\/main<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n    export<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We imported the basic routing components, the previously created Home<\/code> component, and the sample data in the code above. Then we configured our route inside the App<\/code> component. Route<\/code> accepts an element prop set to the Home<\/code> component.<\/p>\n
    import<\/span> React from<\/span> 'react'<\/span>;\n    import<\/span> ReactDOM from<\/span> 'react-dom'<\/span>;\n    import<\/span> '.\/index.css'<\/span>;\n    import<\/span> App from<\/span> '.\/App'<\/span>;\n    import<\/span> { BrowserRouter } from<\/span> 'react-router-dom'<\/span>;\n    ReactDOM.render(\n      <React.StrictMode<\/span>><\/span>\n        <BrowserRouter<\/span>><\/span>\n          <App<\/span> \/><\/span>\n        <\/BrowserRouter<\/span>><\/span>\n      <\/React.StrictMode<\/span>><\/span><\/span>,\n      document<\/span>.getElementById('root'<\/span>)\n    );\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Let\u2019s add some styles to give the application a decent look. Add the following to your App.css<\/code> file:<\/p>\n
    .App<\/span> {\n      width<\/span>: 1024px<\/span>;\n      max-width<\/span>: 90%<\/span>;\n      margin<\/span>: 0<\/span> auto;\n    }\n    .App<\/span> > div<\/span> {\n      display<\/span>: flex;\n      justify-content<\/span>: center;\n    }\n    .App<\/span> > div<\/span> > a<\/span> {\n      color<\/span>: inherit;\n      text-decoration<\/span>: none;\n    }\n    .cards<\/span> {\n      display<\/span>: grid;\n      grid-template-columns<\/span>: repeat<\/span>(auto-fit, minmax(250px<\/span>, 1<\/span>fr));\n      grid-gap<\/span>: 2rem<\/span>;\n    }\n    .card<\/span> {\n      height<\/span>: 20rem<\/span>;\n      border<\/span>: 1px<\/span> solid rgba<\/span>(0<\/span>, 0<\/span>, 0<\/span>, 0.1<\/span>);\n    }\n    .card<\/span> > .img-wrapper<\/span> {\n      height<\/span>: 50%<\/span>;\n    }\n    .card<\/span> > .img-wrapper<\/span> > img<\/span> {\n      width<\/span>: 100%<\/span>;\n      height<\/span>: 100%<\/span>;\n      object-fit<\/span>: cover;\n    }\n    .card<\/span> > div<\/span>:last-child<\/span> {\n      padding<\/span>: 0.5rem<\/span>;\n      height<\/span>: 50%<\/span>;\n    }\n    .card<\/span> > div<\/span> > h3<\/span> {\n      text-align<\/span>: center;\n      font-size<\/span>: 0.9rem<\/span>;\n    }\n    .card<\/span> > div<\/span> > p<\/span> {\n      font-size<\/span>: 0.8rem<\/span>;\n      color<\/span>: #555<\/span>;\n    }\n    .card<\/span> > div<\/span> > a<\/span> {\n      text-decoration<\/span>: none;\n      padding<\/span>: 0.2rem<\/span> 0.5rem<\/span>;\n      border<\/span>: 1px<\/span> solid #4cf<\/span>;\n      color<\/span>: inherit;\n      font-weight<\/span>: 700<\/span>;\n      font-size<\/span>: 0.8rem<\/span>;\n      display<\/span>: inline-block;\n    }\n    .blog<\/span> > h3<\/span> {\n      margin-bottom<\/span>: 1rem<\/span>;\n    }\n    .blog<\/span> * {\n      width<\/span>: 100%<\/span>;\n    }\n    .btn<\/span> {\n      display<\/span>: inline;\n      padding<\/span>: 0.5rem<\/span> 2rem<\/span>;\n      margin<\/span>: 0.7rem<\/span> 0<\/span>;\n      width<\/span>: auto;\n      background<\/span>: #fff<\/span>;\n      border<\/span>: 1px<\/span> solid #4cf<\/span>;\n      cursor<\/span>: pointer;\n      font-size<\/span>: 1rem<\/span>;\n      font-weight<\/span>: 600<\/span>;\n    }\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Save the changes, and your application should now look like this:<\/p>\n
\"\"<\/p>\n
Embed YouTube Player<\/h2>\n
The react-youtube<\/code> package simplifies the integration of the YouTube player into React applications by providing a utility React component, <YouTube \/><\/code>, which accepts a videoId<\/code> prop, an onReady<\/code> prop, and some other optional props. The videoId<\/code> prop gives the id<\/code> of a particular YouTube video, while  onReady<\/code>  hold a function that will be executed when the player is ready.<\/p>\n
The following code illustrates the basic use of the component as well as its available props:<\/p>\n
    <YouTube\n      videoId={string} \/\/ defaults -> null<\/span>\n      id={string} \/\/ defaults -> null<\/span>\n      className={string} \/\/ defaults -> null<\/span>\n      containerClassName={string} \/\/ defaults -> ''<\/span>\n      title={string} \/\/ defaults -> null<\/span>\n      opts={obj} \/\/ defaults -> {}<\/span>\n      onReady={func} \/\/ defaults -> noop<\/span>\n      onPlay={func} \/\/ defaults -> noop<\/span>\n      onPause={func} \/\/ defaults -> noop<\/span>\n      onEnd={func} \/\/ defaults -> noop<\/span>\n      onError={func} \/\/ defaults -> noop<\/span>\n      onStateChange={func} \/\/ defaults -> noop<\/span>\n      onPlaybackRateChange={func} \/\/ defaults -> noop<\/span>\n      onPlaybackQualityChange={func} \/\/ defaults -> noop<\/span>\n    \/>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Open your App.js<\/code> file and add a dynamic route to configure a dynamic path based on the id<\/code> of each blog post.<\/p>\n
    import<\/span> BlogPost from<\/span> '.\/components\/BlogPost'<\/span>;\n   \n    \/\/...<\/span>\n    \n    <Routes<\/span>><\/span>\n      <Route<\/span> path<\/span>=\"\/\"<\/span> element<\/span>={<\/span><Home<\/span> data<\/span>={data}<\/span> \/><\/span>} \/>\n      <Route<\/span> path<\/span>=\"\/blogpost\/:id\"<\/span> element<\/span>={<\/span><BlogPost<\/span> data<\/span>={data}<\/span> \/><\/span>} \/>\n    <\/Routes<\/span>><\/span><\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now, let\u2019s create a  BlogPost.js<\/code> file in the src\/components<\/code> directory and add the following to it:<\/p>\n
    import<\/span> React from<\/span> 'react'<\/span>;\n    import<\/span> YouTube from<\/span> 'react-youtube'<\/span>;\n    import<\/span> { useParams } from<\/span> 'react-router'<\/span>;\n    export<\/span> default<\/span> function<\/span> BlogPost<\/span>({ data }<\/span>) <\/span>{\n      const<\/span> params = useParams();\n      const<\/span> post = data.posts.find((dataItem<\/span>) =><\/span> dataItem.id === params.id);\n      const<\/span> youtubeID = post.url.split('v='<\/span>)[1<\/span>];\n      const<\/span> onReady = (e<\/span>) =><\/span> {\n        console<\/span>.log(e.target);\n      };\n      return<\/span> (\n        <div<\/span> className<\/span>=\"blog\"<\/span>><\/span>\n          <h3<\/span>><\/span>{post.title}<\/h3<\/span>><\/span>\n          <p<\/span>><\/span>{post.content}<\/p<\/span>><\/span>\n          <div<\/span> className<\/span>=\"player\"<\/span>><\/span>\n            <YouTube<\/span> videoId<\/span>={youtubeID}<\/span> onReady<\/span>={onReady}<\/span> \/><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We imported the useParams<\/code> hook, which is used to extract the params<\/code> object from the dynamic path. Then we created a BlogPost<\/code> component that accepts our sample local data as a prop. The data is then traversed to find the post object whose id matches the params id.<\/p>\n
The video id of a YouTube video is usually contained in the video URL, mostly specified as a query parameter v<\/code>. We performed some JavaScript string manipulation to extract the video id from the URL. The component then renders some content and, most importantly, the YouTube Player that takes the videoId<\/code> and an onReady<\/code> prop as props.<\/p>\n
To view a blog post, save the changes and click on any blog post on the home page. You should see the embedded YouTube Player with an already loaded video.<\/p>\n
\"\"<\/p>\n
Customizing the Player<\/h2>\n
The YouTube IFrame API provides a lot of freedom by defining many parameters that make the YouTube player more customizable. For example, you can easily define the player controls externally, set the video to play repeatedly, cause the player to play the loaded video automatically after rendering, etc.<\/p>\n
However, the react-youtube<\/code> package has an opts<\/code> object prop that can help manage the video player\u2019s preferences. The opts<\/code> prop has a playerVars<\/code> nested object that allows you to utilize the usual YouTube IFrame API parameters and set a custom width<\/code> and height<\/code> for the player.<\/p>\n
Let\u2019s look at some of the customization possibilities.<\/p>\n
Define External Player Controls<\/h3>\n
Users can disable the default player controls and then create their logic by altering the API\u2019s state. For simplicity, we will include only the pause and play controls.<\/p>\n
Update the code in your BlogPost.js<\/code> file to look like this:<\/p>\n
    import<\/span> React, { useState } from<\/span> 'react'<\/span>;\n    import<\/span> YouTube from<\/span> 'react-youtube'<\/span>;\n    import<\/span> { useParams } from<\/span> 'react-router'<\/span>;\n    export<\/span> default<\/span> function<\/span> BlogPost<\/span>({ data }<\/span>) <\/span>{\n      const<\/span> [player, setPlayer] = useState(null<\/span>);\n      const<\/span> params = useParams();\n      const<\/span> post = data.posts.find((dataItem<\/span>) =><\/span> dataItem.id === params.id);\n      const<\/span> youtubeID = post.url.split('v='<\/span>)[1<\/span>];\n      const<\/span> onReady = (e<\/span>) =><\/span> {\n        setPlayer(e.target);\n      };\n      const<\/span> onPlayHandler = ()<\/span> =><\/span> {\n        player.playVideo();\n      };\n      const<\/span> onPauseHandler = ()<\/span> =><\/span> {\n        player.pauseVideo();\n      };\n      return<\/span> (\n        <div<\/span> className<\/span>=\"blog\"<\/span>><\/span>\n          <h3<\/span>><\/span>{post.title}<\/h3<\/span>><\/span>\n          <p<\/span>><\/span>{post.content}<\/p<\/span>><\/span>\n          <div<\/span> className<\/span>=\"player\"<\/span>><\/span>\n            <YouTube<\/span>\n              videoId<\/span>={youtubeID}<\/span>\n              onReady<\/span>={onReady}<\/span>\n              opts<\/span>={{<\/span>\n                playerVars:<\/span> {\n                  controls:<\/span> 0<\/span>,\n                },\n              }}\n            \/><\/span>\n          <\/div<\/span>><\/span>\n          <button<\/span> onClick<\/span>={onPlayHandler}<\/span> className<\/span>=\"btn\"<\/span>><\/span>\n            Play\n          <\/button<\/span>><\/span>\n          <button<\/span> onClick<\/span>={onPauseHandler}<\/span> className<\/span>=\"btn\"<\/span>><\/span>\n            Pause\n          <\/button<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We created a new state variable called player<\/code> to hold the player state in the onReady<\/code> function when rendering the YouTube player component. We then use this player state to call the playVideo<\/code> and pauseVideo<\/code> methods in their respective play and pause handlers.\nThe controls key in the playerVars<\/code> object takes 0 and 1 as values. When set to 0, the player controls do not display in the player and vice versa.<\/p>\n
\"\"<\/p>\n
Autoplay Video on Page Load<\/h3>\n
The API has an autoplay<\/code> parameter which indicates whether the video should start playing automatically when the player loads or not. It takes the values 0 and 1 as well. When set to 1, it enables autoplay, allowing instant video playing without any human interaction with the player. While 0, which is the default value, disables autoplay.\nTo enable autoplay, set the value of the autoplay<\/code> key in the playerVars<\/code> object to 1.<\/p>\n
    <YouTube<\/span>\n      videoId<\/span>={youtubeID}<\/span>\n      onReady<\/span>={onReady}<\/span>\n      opts<\/span>={{<\/span>\n        playerVars:<\/span> {\n          autoplay:<\/span> 1<\/span>,\n        },\n      }}\n    \/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Create a Video Playlist<\/h3>\n
The YouTube IFrame API also provides a playlist<\/code> parameter that allows you to create a playlist of videos. To create a playlist, add a playlist<\/code> object key to the playerVars<\/code> object with a string value containing comma-separated IDs of the videos to form the playlist.<\/p>\n
To demonstrate this in our application, update the opts<\/code> props in the rendered YouTube component to look like this:<\/p>\n
    <YouTube<\/span>\n      videoId<\/span>={youtubeID}<\/span>\n      onReady<\/span>={onReady}<\/span>\n      opts<\/span>={{<\/span>\n        playerVars:<\/span> {\n          playlist:<\/span> '00AkMN9IAAY<\/span>,4oCVDkb_EIs<\/span>,7fPXI_MnBOY<\/span>',\n        },\n      }}\n    \/><\/span>;\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
In the code, we used hardcoded video ids to define the playlist. Save the file to view the changes in the browser.<\/p>\n
\"\"<\/p>\n
Manually Set the Start and Stop Time.<\/strong>\nThe API accepts start<\/code> and stop<\/code> parameters that help determine when the player should start or stop playing the provided video in seconds relative to the start of the video.<\/p>\n
    <YouTube\n        videoId={youtubeID}\n        onReady={onReady}\n        opts={\n          { playerVars: {\n            start: <<start-time>>,\n            stop: <<stop-time>>\n          } }\n        }\n    \/>\n<\/code><\/span><\/pre>\n
There are so many customization settings in the YouTube IFrame API that we can\u2019t possibly cover them all in this article. However, you can click here<\/a> to learn more about other parameters to personalize your YouTube player.<\/p>\n
You can find the complete project here<\/a> on Github.<\/p>\n
Conclusion<\/h2>\n
In this post, we saw how to embed a YouTube player into a React app using the react-youtube package. In addition, we looked at a few of the options for personalization.<\/p>\n
Resources you may find helpful:<\/strong><\/p>\n
With that done, we need to wrap our application with the BrowserRouter<\/code> component as required by React Router<\/a>. Update your index.js<\/code> file in the \/src<\/code> folder with the following:<\/p>\n
To keep things simple, we will be working with locally generated sample data. Create a file called data.json<\/code> in the \/src<\/code> directory and populate it with the JSON data from this codeSandbox file<\/a>.<\/p>\n