DEV Community

Cover image for How to build a React Video Modal with Hooks

Posted on


How to build a React Video Modal with Hooks

I want to share with other Front End developers how to build a React Video modal from scratch.

I hope everyone finds this small tutorial really helpful.

I'm leaving the url of the working modal and code at the end of the tutorial if you want to test it and and check out the code

First, we need to use the useState Hook to change the state of the modal once the user clicks the modal button and clicks the close modal button.

Second, we will do the same to build a loader icon once the modal is open and waits to fetch the video from YouTube like so.

const [modal, setModal] = useState(false);
  const [videoLoading, setVideoLoading] = useState(true);

  const openModal = () => {

  const spinner = () => {
Enter fullscreen mode Exit fullscreen mode

Third, we will start working on the JSX part of the code setting up an onClick event to the button and using the ternary operator for the modal and the loader icon like so.

return (
    <div className="App">
      <button onClick={openModal} className="">
        Click Me!
        {modal ? (
          <section className="modal__bg">
            <div className="modal__align">
              <div className="modal__content" modal={modal}>
                  arial-label="Close modal"
                <div className="modal__video-align">
                  {videoLoading ? (
                    <div className="modal__spinner">
                  ) : null}
                    title="YouTube video player"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        ) : null}
Enter fullscreen mode Exit fullscreen mode

Here I'm leaving the url of the code if you also want to check out the CSS styles and also the live demo.

Live Demo:

I hope I'm able to help anyone that wants to build a React Modal Video from scratch without using any library.

Follow me on Github & Connect with me on LinkedIn

Top comments (0)

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Articles for Your Portfolio

Integrate the articles of your profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the API: How to Fetch Your Articles for Your Portfolio with React