Merge pull request #13 from prototyp3-dev/feature/rives-video

feat: youtube RiVES video

frontend/app/components/youtubeVideo.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+
+import React from 'react';
+import YouTube, { YouTubeProps } from 'react-youtube';
+
+function YoutubeVideo({videoId}:{videoId:string}) {
+  const onPlayerReady: YouTubeProps['onReady'] = (event) => {
+    // access to player in all event handlers via event.target
+    event.target.pauseVideo();
+  }
+
+  const opts: YouTubeProps['opts'] = {
+    playerVars: {
+      // https://developers.google.com/youtube/player_parameters
+      autoplay: 1,
+    },
+  };
+
+  return <YouTube videoId={videoId} opts={opts} onReady={onPlayerReady} />;
+}
+
+export default YoutubeVideo;

frontend/app/page.tsx

@@ -1,4 +1,5 @@
 import Title from "./components/Title";
+import YoutubeVideo from "./components/youtubeVideo";
 import { fontPressStart2P } from './utils/font';
 
 
@@ -15,8 +16,8 @@ export default function Home() {
             RIVES will enable decentralized trustless tournaments so that no one can deny your bounty after an epic play!
           </p>
 
-          <div className="w-1/2 bg-black h-1/2 rounded flex items-center justify-center">
-            Demo Video
+          <div className="w-1/2 flex items-center justify-center">
+            <YoutubeVideo videoId="1x5B1xJY7as" />
           </div>
 
       </section>

frontend/package.json

@@ -29,6 +29,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-use-downloader": "^1.2.4",
+    "react-youtube": "^10.1.0",
     "three": "^0.159.0"
   },
   "devDependencies": {