#11: Add all available videos

package.json

@@ -14,6 +14,7 @@
     "@astrojs/check": "^0.7.0",
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.10.1",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.4.5"
   },

src/components/VideoPlayer.astro

@@ -11,17 +11,26 @@ import IconChevronRight from "@icons/IconChevronRight.astro";
     </div>
   </div>
   <div class="relative">
-    <div class="flex gap-3 relative overflow-x-scroll">
-      <iframe class="w-2/5" src="https://www.youtube.com/embed/Fxb9bgPpnys"
-      ></iframe>
-      <iframe class="w-2/5" src="https://www.youtube.com/embed/x2fNlaTvd60"
-      ></iframe>
-      <iframe class="w-2/5" src="https://www.youtube.com/embed/wFAazFeFgOY"
-      ></iframe>
+    <div class="flex gap-3 overflow-x-scroll relative scrollbar-hide">
+      <iframe
+        class="w-4/5 sm:w-2/5"
+        src="https://www.youtube.com/embed/Fxb9bgPpnys"></iframe>
+      <iframe
+        class="w-4/5 sm:w-2/5"
+        src="https://www.youtube.com/embed/x2fNlaTvd60"></iframe>
+      <iframe
+        class="w-4/5 sm:w-2/5"
+        src="https://www.youtube.com/embed/wFAazFeFgOY"></iframe>
+      <iframe
+        class="w-4/5 sm:w-2/5"
+        src="https://www.youtube.com/embed/QNXl7RAOevI"></iframe>
+      <iframe
+        class="w-4/5 sm:w-2/5"
+        src="https://www.youtube.com/embed/i4Ap6hCtyug"></iframe>
       <div class="min-w-[40%] min-h-full"></div>
     </div>
     <div
-      class="absolute bg-gradient-to-r from-transparent to-blue h-full ml-auto top-0 right-0 w-1/5"
+      class="absolute bg-gradient-to-r from-transparent to-blue h-full ml-auto top-0 right-0 w-2/12 sm:w-1/5"
     >
     </div>
   </div>

tailwind.config.mjs

@@ -22,7 +22,9 @@ export default {
       }
     },
   },
-  plugins: [],
+  plugins: [
+    require('tailwind-scrollbar-hide')
+  ],
   safelist: [
     'bg-blue',
     'bg-green',