Getting More Out of Embedded Youtube Videos Using React-Youtube Library

Have you ever had to embed a Youtube video into your web development project? The Youtube Iframe API is fairly easy to use but has a fair amount of limitations. To better enhance your developing experience you can import a React-Youtube library to give you additional tools to better run Youtube in your application.

I recently used the React-YouTube library to trigger an event when the video ended. In this particular project, I created a Youtube Roulette project with a partner that randomly played a popular Youtube video within a given category, however, for a better user experience I needed to add functionality such that the next random video within the same category would play once the video ended. The onEnd hook, part of the react-Youtube library, functioned exactly in this way. Let’s take a look at how this was used.

The first step is to import the react-youtube library as shown in line 3 of the below code:

Next is to return HTML code in the react component to specifically call a helper function using react-youtube’s OnEnd hook in line 58. This is an event listener that fires exactly when the video ends.

The event listener helper function handleVideoEnd then uses various props and inverse data flow to and from another react component to determine the next video to play from API.

There are various other hooks that can be used to fire off other useful event listeners. This below list is a very useful resource from https://www.npmjs.com/package/react-youtube.

The names of the hooks are fairly intuitive to their functionality, onReady fires an event when the video is ready to play, onPlay fires an event listener when the video plays, etc.

I have found these tools to be extremely simple to use but powerful in my applications and I hope you will as well. Happy coding!