Added working video popup component to the app.

Components/Buttons/video-button.jsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import ModalVideo from "react-modal-video";
+import "react-modal-video/scss/modal-video.scss";
+
+const VideoButton = ({ link, buttonOneText }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openModal = () => {
+    setIsOpen(true);
+  };
+
+  return (
+    <div>
+      <button className="px-20 mt-8 mx-5 py-2 text-white border border-blue-500 rounded hover:border-white transition duration-300 ease-in-out focus:outline-none" onClick={openModal}>
+        {buttonOneText}
+      </button>
+      <ModalVideo
+        channel="youtube"
+        isOpen={isOpen}
+        videoId={link}
+        onClose={() => setIsOpen(false)}
+      />
+    </div>
+  );
+};
+
+export default VideoButton;

Components/Layout/section.jsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
-
+import React, { useEffect, useRef, useState } from "react";
+import VideoButton from "/home/clyde/Code/shiloh/Components/Buttons/video-button.jsx";
 const Section = ({ videoUrl, text, buttonOneText, buttonTwoText }) => {
   const videoRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -7,7 +7,7 @@ const Section = ({ videoUrl, text, buttonOneText, buttonTwoText }) => {
   useEffect(() => {
     const options = {
       root: null,
-      rootMargin: '0px',
+      rootMargin: "0px",
       threshold: 0.5,
     };
 
@@ -40,19 +40,19 @@ const Section = ({ videoUrl, text, buttonOneText, buttonTwoText }) => {
         loop
         autoPlay={isPlaying}
       />
-<div className="relative z-10 flex flex-col items-center justify-center h-full">
-  <div className="relative flex justify-center items-end w-full mb-20">
-    <h1 className="text-6xl font-normal text-white">{text}</h1>
-  </div>
-  <div className="flex justify-start space-x-4">
-    <button className="px-20 mt-8 mx-5 py-2 text-white border border-blue-500 rounded hover:border-white transition duration-300 ease-in-out focus:outline-none">{buttonOneText}</button>
-    <button className="px-4 mt-8 mx-5 py-2 text-white underline border-white rounded hover:border-white transition duration-300 ease-in-out focus:outline-none">{buttonTwoText}</button>
-  </div>
-</div>
-
-      
+      <div className="relative z-10 flex flex-col items-center justify-center h-full">
+        <div className="relative flex justify-center items-end w-full mb-20">
+          <h1 className="text-6xl font-normal text-white">{text}</h1>
+        </div>
+        <div className="flex justify-start space-x-4">
+          <VideoButton buttonOneText="Watch" videoId="sjxLF4IYnJc" />
+          <button className="px-4 mt-8 mx-5 py-2 text-white underline border-white rounded hover:border-white transition duration-300 ease-in-out focus:outline-none">
+            {buttonTwoText}
+          </button>
+        </div>
+      </div>
     </div>
   );
 };
 
-export default Section;
+export default Section;

package.json

@@ -18,6 +18,7 @@
     "react": "^18.2.0",
     "react-dom": "18.2.0",
     "react-intersection-observer": "^9.4.3",
+    "react-modal-video": "^2.0.0",
     "react-player": "^2.12.0",
     "tailwindcss": "3.3.1"
   }