Linking to videos

src/Components/Feed/Feed.css

@@ -23,4 +23,14 @@
 }
 .card p{
     font-size: 14px;
+}
+
+
+#loader{
+    height: 100vh;
+    color: red;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3rem;
 }

src/Components/Feed/Feed.jsx

@@ -19,6 +19,9 @@ const Feed = ({ Catagory }) => {
     }
   };
 
+
+
+
   useEffect(() => {
     fetchData();
   }, [Catagory]);
@@ -35,7 +38,7 @@ const Feed = ({ Catagory }) => {
           </Link>
         ))
       ) : (
-        <p>Loading videos...</p>
+        <p  id='loader'>Loading videos...</p>
       )}
     </div>
   );

src/Components/Navbar/Navbar.jsx

@@ -7,12 +7,13 @@ import upload_icon from '../../assets/upload.png'
 import more_icon from '../../assets/more.png'
 import notification_icon from '../../assets/notification.png'
 import hero from '../../assets/hero.jpg'
+import { Link } from 'react-router-dom'
 const Navbar = ({setSidebar}) => {
   return (
     <nav className='flex-div'>
       <div   className='nav-left flex-div'>
         <img id='menu-logo' src={menu_icon} onClick={()=>setSidebar(prev => prev === false ? true :false )}  alt="" />
-        <img  id='hero-logo'  src={herologo} alt="" />
+        <Link to='/'><img  id='hero-logo'  src={herologo} alt="" /></Link>
       </div>
       <div className="nav-middle flex-div">
         <div className="search-box flex-div ">

src/Components/PlayVideo/PlayVideo.css

@@ -1,8 +1,9 @@
 .play-video{
     flex-basis: 69%;
 }
-.play-video video{
+.play-video iframe{
     width: 100%;
+    height: 37vw;
 }
 .play-video h3{
     margin-top: 10px;

src/Components/PlayVideo/PlayVideo.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import './PlayVideo.css'
 import video1 from '../../assets/video.mp4'
 import like from '../../assets/like.png'
@@ -8,10 +8,16 @@ import save from '../../assets/save.png'
 import hero from '../../assets/hero.jpg'
 import user_profile from '../../assets/user_profile.jpg'
 
-const PlayVideo = () => {
+const PlayVideo = ({videoId}) => {
+
+  useEffect(()=>{
+    console.log("Videopage Is realoading !!!!");
+  })
+
   return (
     <div className="play-video">
-      <video src={video1} controls muted autoPlay></video>
+      {/* <video src={video1} controls muted autoPlay></video> */}
+      <iframe  src={`https://www.youtube.com/embed/${videoId}?autoplay=1`}  frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
       <div className="play-video-info">
         <p>150 M viwes &bull; 2 days ago</p>
         <div>

src/Data.js

@@ -1,15 +1,13 @@
 export const API_KEY = 'AIzaSyBCqueFuzCscUq9ccWsu-YsiiMUN57b84I';
 
-export const valuechanger=(value)=>{
-    if(value>=1000000){
-        return Math.floor(value/1000000)+'M'
+export const valuechanger = (value) => {
+    if (value >= 1000000) {
+        return Math.floor(value / 1000000) + 'M';
+    } else if (value >= 100000) {
+        return Math.floor(value / 100000) + 'L'; 
+    } else if (value >= 1000) {
+        return Math.floor(value / 1000) + 'K';
+    } else {
+        return value.toString(); // Return value as a string for consistency
     }
-    else if(1000000>value>=1000){
-        return Math.floor(value/1000)+'K'
-    }
-    else{
-        return value
-    }
-
-
 }

src/Pages/Video/Video.jsx

@@ -2,12 +2,15 @@ import React from 'react'
 import '../Video/Video.css'
 import PlayVideo from '../../Components/PlayVideo/PlayVideo'
 import Recomended from '../../Components/Recomended/Recomended'
+import { useParams } from 'react-router-dom'
 
 const Video = () => {
+const{videoId,catagoryId}=useParams();
+
   return (
     <div className="play-container">
-      <PlayVideo/>
-      <Recomended/>
+      <PlayVideo videoId={videoId} />
+      <Recomended catagoryId={catagoryId}  />
     </div>
   )
 }