Get Ready to React to Videos for React
A quick how to guide on how to implement a video on a React project
Even before I became a software engineer, I have always been smitten with videos on websites. I think videos are a great way to make a website stand out. They just pop! Here are 5 reasons on SocialMediaToday on why you should include a video on your website.
Now we know why we should include a video on our website, but how we do we do it? If you love React as much as I do then I’m here to help you! This is a how to guide for displaying a video on a React project.
There is a wonderful npm package called ReactPlayer. You can visit the official documentation here
Like all npm packages the first thing we need to do is install it into our project. Here is that command
npm i react-player
Next we need to add our imports to the top of the js file that we are going to implement the video on
Now it is time to add the video! Here is a list of all the supported videos..
I’ll be adding the video to a project I worked on a couple weeks ago. It’s going to be a YouTube video that is a demo of my application. This is what the code looks like in my js file.
This is what the video looks like on my project when the server is running
Sweet! We got a video displayed, but we aren’t finished yet. Now we can modify some of the features this package offers to us. You can check them out here or on the official documentation.
I’m only going to modify a couple features, but you’re welcome to customize as many or as little as you like. You can also use callback props with the player for more advanced conditions. I’m not going to get into them in this article though. All of the callback props are listed on the official documentation though. Here is a screen shot of my updated js file
url — location of video
controls — displays the player controls for the video..I recommend this if you want to allow your user to pause your video
width — the size of the player horizontally
height — the size of the player vertically
pip — picture in picture is allowed(pip will allow a user to explore your site while the video plays in the corner!)
If you’re unfamiliar with pip check out this out!
If you’re using Chrome you can install the extension here to allow pip. It’s pretty cool if I must say so! Once installed here is the keyboard shortcut
Keyboard shortcut: Alt + P (⌥ + P on macOS)Here is what my player looked like on my site after installing the browser extension and setting pip to true
And if a user opens a modal…
the video will continue to play!
That is it though! The video is implemented and ready to be watched by plenty of users. I hope you found this how to guide to be helpful! You can also check and play my game Interdimensional Fighters 2.0 here . See if you can beat the high score. Thanks for reading!
