feat: add scaffolding for new YouTubeEmbed component

resolves #18
noclocks · Jun 3, 2024 · d203b6c · d203b6c
1 parent c8eaceb
commit d203b6c
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 0 deletions.
diff --git a/app/app/components/YouTubeEmbed.tsx b/app/app/components/YouTubeEmbed.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import '../styles/youtube.css';
+
+// import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+// import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
+
+interface YouTubeEmbedProps {
+    videoId: string;
+    title?: string;
+    width?: string;
+    height?: string;
+}
+
+export default function YouTubeEmbed({ videoId, title, width = "560", height = "315" }: YouTubeEmbedProps) {
+
+    const src = `https://www.youtube.com/embed/${videoId}?si=NT6nO5iaFP_2BEKp`;
+
+    return (
+        <div className="youtube-container">
+            <iframe
+                width={width}
+                height={height}
+                src={src} //{`https://www.youtube.com/embed/${videoId}`}
+                title={title}
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                referrerPolicy="strict-origin-when-cross-origin"
+                allowFullScreen
+            ></iframe>
+            {/* <LiteYouTubeEmbed
+                id={videoId || ''}
+                title={title || ''}
+                params=''
+                adNetwork={true}
+                playlist={false}
+                poster='hqdefault'
+                noCookie={true}
+                ref={null}
+            /> */}
+        </div>
+    );
+}
diff --git a/app/app/routes/_index.tsx b/app/app/routes/_index.tsx
@@ -1,6 +1,8 @@
 import {Header} from "../components/Header";
 import {Footer} from "../components/Footer";
 
+import YouTubeEmbed from "../components/YouTubeEmbed";
+
 // ASSETS //
 // Fonts
 import "../styles/typography.css"
@@ -15,6 +17,9 @@ import VillardImg from "../wp-content/uploads/sites/1302270/2022/06/Villard-S-Ba
 // Styles
 import "../styles/home.css";
 
+const YoutubeVideoId = "fdi_z9NLT_w?si=iSeO4L8snTfPbG5H";
+const YouTubeVideoTitle = "Villard Bastien"
+
 export default function Index() {
   return (
     <>
@@ -239,6 +244,10 @@ export default function Index() {
                           </div>
                         </div>
                       </div>
+                      <YouTubeEmbed
+                        videoId={YoutubeVideoId}
+                        title={YouTubeVideoTitle}
+                      />
                       <div className="et_pb_section et_pb_section_2 content-section fl-home-sec-4 et_pb_with_background et_section_regular">
                         <div className="et_pb_row et_pb_row_2">
                           <div className="et_pb_column et_pb_column_1_2 et_pb_column_2  et_pb_css_mix_blend_mode_passthrough">

diff --git a/app/app/styles/youtube.css b/app/app/styles/youtube.css
@@ -0,0 +1,11 @@
+.youtube-container {
+    display: flex;
+    justify-content: center;
+    padding: 20px;
+    background-color: #f0f0f0;
+}
+
+iframe {
+    border: 2px solid #000;
+    border-radius: 8px;
+}