Video component can now fetch content from remote

src/lib/video.svelte

@@ -1,14 +1,25 @@
 <script lang="ts">
     let {
         src,
+        thumb,
+        remote,
     }: {
         src: string;
+        thumb?: string;
+        remote?: boolean;
     } = $props();
+
+    let space = remote ? "https://files.natconf.dev/cdn/" : "";
 </script>
 
 <!-- Muted video element -->
 
-<video controls class="video-block" muted>
-    <source src={src} type="video/mp4">
-    Video is broken, sorry!
+<video
+    controls
+    class="video-block"
+    muted
+    preload="none"
+    poster={thumb ? space + thumb : "/common/video-placeholder.webp"}>
+        <source src={space + src} type="video/mp4">
+        Video is broken, sorry!
 </video>

src/routes/+layout.svelte

@@ -310,6 +310,7 @@
 
         video {
             max-width: var(--media-width);
+            height: var(--media-height);
             margin-top: 12px;
             margin-bottom: 12px;
         }

src/routes/projects/games/projektike.md

@@ -1,3 +1,13 @@
+<script lang="ts">
+    import Video from "$lib/video.svelte";
+</script>
+
 Two friends of mine and I worked together on a multiplayer game where you can throw magical artifacts at one another. It was developed using the Godot Engine. The game featured multiple character classes utilising artifacts such as fire, ice, black/white holes, wind, and teleports, and also had a money collecting mechanic. Player profile saving and character customisation were available, and there was an array of maps available to play on. Up to four players were supported.
 
-The project is currently on hold as of May 2025.
+The project is currently on hold as of May 2025.
+
+<Video
+    src="projects/games/projektike/powerups.mp4"
+    thumb=""
+    remote
+    />