Add VideoPlayer components & function

Author: sakibdeveloper999

src/App.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Navbar from './components/Navbar/Navbar'
 import Hero from './components/Hero/Hero'
 import Programs from './components/Programs/Programs'
@@ -8,16 +8,19 @@ import Campus from './components/Campus/Campus'
 import Testimonials from './components/Testimonials/Testimonials'
 import Contact from './components/Contact/Contact'
 import Footer from './components/Footer/Footer'
+import VideoPlayer from './components/videoPlayer/VideoPlayer'
 
 const App = () => {
+  const [playState, setPlayState] = useState(false);
+
   return (
     <div>
       <Navbar/>
       <Hero/>
       <div className="container">
         <Title subTitle='Our PROGRAM' title='What We Offer'/>
       <Programs/>
-      <About/>
+      <About setPlayState={setPlayState}/>
       <Title subTitle='Gallery' title='Campus Photos'/>
       <Campus/>
          <Title subTitle='TESTIMONIALS' title='What Student Says'/>
@@ -26,6 +29,7 @@ const App = () => {
          <Contact/>
          <Footer/>
       </div>
+      <VideoPlayer playState={playState} setPlayState={setPlayState}/>
     </div>
   )
 }

src/assets/video.mp4

@@ -22,7 +22,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
-
+    cursor: pointer;
 }
 .about h3{
     font-weight: 600;

src/components/About/About.css

@@ -3,12 +3,14 @@ import './About.css'
 import about_img from '../../assets/about.png'
 import play_icon from '../../assets/play-icon.png'
 
-const About = () => {
+const About = ({setPlayState}) => {
   return (
     <div className='about'>
         <div className="about-left">
             <img src={about_img} className='about-img' alt="" />
-            <img src={play_icon} className='play-icon' alt="" />
+            <img src={play_icon} className='play-icon' onClick={()=>{
+              setPlayState(true)
+            }} alt="" />
         </div>
         <div className="about-right">
             <h3>ABOUT UNIVERSITY</h3>

src/components/About/About.jsx

@@ -0,0 +1,22 @@
+.video-player{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.9);
+    z-index: 100 ;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.video-player video{
+    width: 90%;
+    max-width: 900px;
+    height: auto;
+    border: 4px solid #fff;
+}
+
+.hide{
+    display: none;
+}

src/components/VideoPlayer/VideoPlayer.css

@@ -0,0 +1,21 @@
+import React, { useRef } from 'react'
+import './VideoPlayer.css'
+import video from '../../assets/video.mp4'
+
+const VideoPlayer = ({playState, setPlayState}) => {
+
+    const player = useRef(null);
+    const closePlayer=(e)=>{
+        if(e.target === player.current){
+            setPlayState(false)
+        }
+    }
+
+  return (
+    <div className={`video-player ${playState ? "" : "hide"}`} ref={player} onClick={closePlayer}>
+        <video src={video} autoPlay muted controls></video>
+    </div>
+  )
+}
+
+export default VideoPlayer