attempt fix subs fullscreen

src/routes/+page.svelte

@@ -16,6 +16,7 @@
 	const seekReducer = useReducer(reducers.seek);
 
 	let videoElement: HTMLVideoElement | undefined = $state();
+	let containerElement: HTMLDivElement | undefined = $state();
 	let newUrl = $state("");
 	let newSubtitleUrl = $state("");
 
@@ -141,6 +142,14 @@
 		setSubtitleUrlReducer({ url: newSubtitleUrl });
 		newSubtitleUrl = "";
 	}
+
+	function toggleFullscreen() {
+		if (!document.fullscreenElement) {
+			containerElement?.requestFullscreen().catch(console.error);
+		} else {
+			document.exitFullscreen();
+		}
+	}
 </script>
 
 <div class="p-4">
@@ -175,22 +184,60 @@
 	</form>
 
 	<div>
+		<div
+			bind:this={containerElement}
+			class="fullscreen-container relative w-full max-w-2xl bg-black"
+		>
 			<!-- svelte-ignore a11y_media_has_caption -->
 			<video
 				bind:this={videoElement}
 				muted
 				controls
+				controlslist="nofullscreen"
 				crossorigin="anonymous"
 				onplay={handlePlay}
 				onpause={handlePause}
 				onseeked={handleSeeked}
 				ontimeupdate={handleTimeUpdate}
-			class="w-full max-w-2xl bg-black"
+				ondblclick={toggleFullscreen}
+				class="h-full w-full"
 			>
 				{#if videoState?.subtitleUrl && !videoState.subtitleUrl.endsWith(".ass")}
-				<track src={videoState.subtitleUrl} kind="subtitles" srclang="en" label="English" default />
+					<track
+						src={videoState.subtitleUrl}
+						kind="subtitles"
+						srclang="en"
+						label="English"
+						default
+					/>
 				{/if}
 				Your browser does not support the video tag.
 			</video>
+			<button
+				onclick={toggleFullscreen}
+				class="absolute top-2 right-2 z-50 rounded bg-black/70 px-2 py-1 text-xs text-white opacity-50 transition-opacity hover:opacity-100"
+			>
+				Fullscreen
+			</button>
+		</div>
 	</div>
 </div>
+
+<style>
+	:global(.JASSUB) {
+		width: 100% !important;
+		height: 100% !important;
+	}
+	:global(.fullscreen-container:fullscreen) {
+		max-width: none !important;
+		width: 100vw !important;
+		height: 100vh !important;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	:global(.fullscreen-container:fullscreen video) {
+		width: 100% !important;
+		height: 100% !important;
+	}
+</style>