diff --git a/src/lib/components/extra/youtube.svelte b/src/lib/components/extra/youtube.svelte
index d9152b0d..e78b9cda 100644
--- a/src/lib/components/extra/youtube.svelte
+++ b/src/lib/components/extra/youtube.svelte
@@ -1,22 +1,25 @@
 <script lang="ts">
-  export let id = undefined
-  export let list = undefined
-  export let playlist = undefined
-  export let start = undefined
-  export let autoplay = false
-  export let disablekb = false
-  export let controls = true
+  export let id: string
+  export let list: boolean = undefined
+  export let playlist: string = undefined
+  export let start: string = undefined
+  export let autoplay: boolean = false
+  export let disablekb: boolean = false
+  export let controls: boolean = true
   export let fs = true
   export let loop = false
-
-  const src = `https://www.youtube.com/embed/${id}?${list ? `listType=playlist&list=${list}&` : ''}${
-    playlist ? `playlist=${playlist}&` : ''
-  }${start ? `start=${start}` : ''}${autoplay ? 'autoplay=1&' : ''}${disablekb ? 'disablekb=1&' : ''}${
-    controls ? '' : 'controls=0&'
-  }${fs ? '' : 'fs=0&'}${loop ? 'loop=1' : ''}`
+  const src = `https://www.youtube.com/embed/${id}?${new URLSearchParams({
+    ...(list ? { listType: 'playlist', list }: {}),
+    ...(playlist ? { playlist } : {}),
+    ...(start ? { start } : {}),
+    disablekb: disablekb ? '1' : '0',
+    controls: controls ? '1' : '0',
+    fs: fs ? '1' : '0',
+    loop: loop ? '1' : '0'
+  }).toString()}`
 </script>
 
-<div class="relative pb-[56.25%] mb-2">
+<div class="relative pb-[56.25%] mb-4">
   <iframe
     {src}
     class="absolute w-full h-full"
@@ -25,4 +28,4 @@
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
     loading="lazy"
     allowfullscreen />
-</div>
+</div>
\ No newline at end of file