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 = () => {
setModal(!modal);
};
const spinner = () => {
setVideoLoading(!videoLoading);
};
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}>
<IoCloseOutline
className="modal__close"
arial-label="Close modal"
onClick={setModal}
/>
<div className="modal__video-align">
{videoLoading ? (
<div className="modal__spinner">
<BiLoaderAlt
className="modal__spinner-style"
fadeIn="none"
/>
</div>
) : null}
<iframe
className="modal__video-style"
onLoad={spinner}
loading="lazy"
width="800"
height="500"
src="https://www.youtube.com/embed/4UZrsTqkcW4"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
</div>
</section>
) : null}
</button>
</div>
);
Here I'm leaving the url of the code if you also want to check out the CSS styles and also the live demo.
Code: https://codesandbox.io/s/nkwxb?file=/src/App.js:423-1898
Live Demo: https://nkwxb.csb.app/
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
https://github.com/cesareuseche
https://www.linkedin.com/in/cesar-useche-profile/
Top comments (0)