From 4347c6fb896c784a88b6a164e2b613d05aa96e50 Mon Sep 17 00:00:00 2001
From: jSohnData <jihos@me.com>
Date: Fri, 18 Aug 2023 23:33:16 -0400
Subject: [PATCH] ADDED youtube video with sociablekit

---
 src/components/Video/Video.jsx | 16 ++++++----------
 src/pages/Homepage.jsx         |  5 ++++-
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/Video/Video.jsx b/src/components/Video/Video.jsx
index 0b9dad3..f7440ec 100644
--- a/src/components/Video/Video.jsx
+++ b/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>
diff --git a/src/pages/Homepage.jsx b/src/pages/Homepage.jsx
index 49b53de..7f43295 100644
--- a/src/pages/Homepage.jsx
+++ b/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 />