video plyr added

Author: Abulfayz05

component/VideoSection.js

@@ -1,20 +1,22 @@
 import React from "react";
 import styles from "../styles/VideoSection.module.css";
+import Plyr from "plyr-react";
+import "plyr-react/plyr.css";
 
 export default function VideoSection() {
   return (
     <div className={styles.container}>
-  
-        <video
-        //   poster="/oromgoh.jfif"
-          src="/oromgoh.MP4"
-          controls
-          muted
-          loop
-
-          // autoPlay
-        ></video>
-  
+      <Plyr
+        source={{
+          type: "video",
+          sources: [
+            {
+              src: "tRufat-LWpU",
+              provider: "youtube",
+            },
+          ],
+        }}
+      />
     </div>
   );
 }

package-lock.json

@@ -20,6 +20,7 @@
     "nextjs-cors": "^2.1.1",
     "nextjs-progressbar": "0.0.14",
     "photoswipe": "^5.3.0",
+    "plyr-react": "^5.1.0",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-google-recaptcha": "^2.1.0",

package.json

@@ -159,9 +159,7 @@ export default function Bosqich({
       ) : (
         <>
           <Marathon data={camp.data} />
-        <VideoSection />
         </>
-      
       )}
 
       <BosqichPrizes title={data[0].contest_gifts} resGifts={resGifts} />
@@ -176,6 +174,8 @@ export default function Bosqich({
         false
       )} */}
 
+      {parseInt(query.id) === 2 ? <VideoSection /> : false}
+
       <div className={styles.rules}>
         {locale === "uz-UZ" ? (
           <h2>Konkurs qoidalari</h2>
@@ -195,7 +195,10 @@ export default function Bosqich({
       </div>
 
       <Winners bosqich={true} users={users} userslist={userslist} />
-      <InitiativePartnersSteps HomeContent={HomeContent} partners={partners.data} />
+      <InitiativePartnersSteps
+        HomeContent={HomeContent}
+        partners={partners.data}
+      />
 
       <Prizes
         title={data[0].contest_award_ceremony}
@@ -205,7 +208,6 @@ export default function Bosqich({
 
       {parseInt(query.id) === 2 ? (
         <div>
-         
           {/* <PhotoAlbom data={photo.data}/> */}
           <Question data={faq.data} HomeContent={HomeContent} />
         </div>

pages/bosqich/[id]/index.js

@@ -1,6 +1,6 @@
 .container{
     position: relative;
-    
+    margin-top: 50px;
     margin-bottom: 50px;
 }