ADDED youtube video with sociablekit

src/components/Video/Video.jsx

@@ -1,18 +1,14 @@
 import { Container, Row, Col } from "../../utlis/Bootstrap.jsx";
 
-export default function Video () {
+export default function Video ( ) {
 
   return (
     <section>
-      <Container fluid id="skills" className="p-5">        
-        <Row>
-          <Col className="text-center">
-            <iframe width="100%" height="315" 
-              src="https://www.youtube.com/embed/Zlr2UKFPm8Y" 
-              title="YouTube video player" 
-              frameborder="0" 
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>                
-            </iframe>
+      <Container fluid id="video" >        
+        <Row className="d-flex justify-content-center">
+          <Col sm={12}>
+            <div className="ratio ratio-16x9 ">
+              <iframe src='https://widgets.sociablekit.com/youtube-playlist-videos/iframe/182278' frameborder='0' width='100%' height='1000'></iframe>            </div>
           </Col>
         </Row>
       </Container>

src/pages/Homepage.jsx

@@ -4,10 +4,12 @@ import Portfolio from "../components/Portfolio"
 import Skill from "../components/Skill";
 import ThreeThings from "../components/ThreeThings";
 import About from "../components/About";
+import Video from "../components/Video";
 import Social from "../components/Social";
 import Footer from "../components/Footer";
 
 
+
 export default function Main () {
 
   return (
@@ -17,7 +19,8 @@ export default function Main () {
       <ThreeThings />
       {/* <div className="top-scene-container"> */}            
       <Portfolio />
-      <Skill />
+      <Video />
+      <Skill />s      
       <About />
       <div className="bottom-scene-container">
         <Social />