Integrating Youtube player in React

#react

The original post is written here along with the code images -> https://easyontheweb.com/how-to-integrate-youtube-iframe-api-in-react/

You will not find a lot of articles on my blog that describe or are based upon an npm-package but this one is. So, some days ago I had to embed a youtube player and Youtube’s iframe API into a react application and well, it wasn’t as breezy as I expected it to be. The documentation page for the iframe API was okay, not good not bad but even after jostling with the API using the CDN for hours I wasn’t properly able to integrate it into my react component.

What helped me at the end was an npm-package called react-youtube and something that I’d been working for for many hours was done within an hour (playing with the API comes after that). I was so impressed with how easily and seamlessly it integrated the youtube iframe player API into my react application that I decided to write an article on it, just so that people who are stuck or frustrated trying to use the CDN to their benefit can use this amazing package available.

The youtube iframe player API
Okay, so if you just happened to reach this article randomly and were wondering what the youtube iframe player API actually was and what could you do with the API then let me give you a brief introduction and overview about it.

There actually are many simple ways you can embed a youtube player into your HTML webpage but the problem comes when you want to interact with that player using Javascript or whatever language you prefer , so this iframe player API gives us methods to control and work with the youtube player that you embed into your HTML. It provides a variety of control options as well events that can trigger pieces of code in your application.

Say, you want to remember how much of the youtube video a user saw ? You just save the time the video is on whenever the ‘pause’ event is triggered by the iframe player. Well , this is just an example and there are many methods and many events that you can use to your advantage or needs with this iframe player API.

You get the point I’m trying to make right ? This API basically allows you to control the player and it’s events with code. Simple as that.

Methods to integrate the youtube iframe player API in react
One of the ways to integrate the youtube iframe player API into your React application would be the way I started doing it and the way they tell us to do it here in the documentation -> https://developers.google.com/youtube/iframe_api_reference

This method involves including their CDN script in your project and then waiting for it to load and bla bla bla… details I don’t event want you to bother about if you want to integrate the player into your react component because it is nothing less than a headache, trust me.

The second method, as told before, which is the basis of this article is package react-youtube which we will discuss in the next section.

react-youtube
So, finally what this article is all about. It would be an understatement to say that this package does most of our setup work when it comes to embedding the Youtube Iframe API in your react component. It basically does everything – from loading the script asynchronously to using the window event listeners that we would have to write ourselves for when the script completes it’s loading.

Another great positive thing about this package is that you don’t have to write the dirty looking event listeners in vanilla Javascript yourself to control the embedded player in your react component. The package provides you a very clean interface to do the same.

You integrate the player just as you would integrate a component into your already written component and you just provide functions as particular props to control the playback events that you would have to otherwise control via event listeners. Functions like onReady, onPlay , onPause etc are there for you to control easily in your React code.

All the playback event bindings provided by the IFrame API are listed here -> https://developers.google.com/youtube/iframe_api_reference#Events

Also, it is easy on customise your youtube player using the react-youtube component by passing in an opts prop to the Youtube component (example ahead).

All in all, trust me when I say it is much easier and cleaner to integrate the Iframe player API using this package than doing it the other way.

react-youtube example
The library couldn’t be any simpler to use. As I told before, embedding it is just like embedding a React component into your component and passing props to it to control various aspects of the player.

After installing the react-youtube package from here -> https://www.npmjs.com/package/react-youtube using npm or yarn . In the component you just need to do this :-

react-youtube example
As you can clearly see it is just like using any other component in your react component.

There are a lot more props you can pass along to use in the component as you can see in the react-youtube documentation I just linked to above. A little thing that might be worth remembering is that the opts prop is one which takes an object and controls the customisation of the player embedded (look and UI and all).

Rest, this is fairly simple and if you don’t understand how to implement something or what a prop means you can drop in a comment below.

Conclusion
Again, as I said in the starting of the article – it’s not often I write about particular packages but this one is a special one cause it really helped me a lot personally and I hope it helps you, the reader as well if it ever comes to integrating the Youtube IFrame in any of your apps.

Also, if you want to know how you can easily take screenshots in your Node application check this article out -> https://easyontheweb.com/take-screenshot-of-page-with-nodejs/