diff --git a/src/lib/Jitsi.svelte b/src/lib/Jitsi.svelte
index 55c46fc..a18e35d 100644
--- a/src/lib/Jitsi.svelte
+++ b/src/lib/Jitsi.svelte
@@ -45,8 +45,10 @@ interact with the Jitsi instance directly without causing a re-render.
 		/**
 		 * Optional snippet rendered after the API is initialized and the meeting is joined.
 		 * Can be used to provide additional UI elements or controls related to the meeting.
+		 * Overlay has pointer-events disabled to allow interaction with the underlying Jitsi
+		 * interface.
 		 */
-		joined?: Snippet<[api: JitsiMeetExternalAPI]>;
+		joinedOverlay?: Snippet<[api: JitsiMeetExternalAPI]>;
 		/**
 		 * Optional snippet rendered after the user has left the meeting. Can be used to
 		 * provide a farewell message or other post-meeting content.
@@ -70,7 +72,7 @@ interact with the Jitsi instance directly without causing a re-render.
 		class: classValue,
 		loading,
 		holdLoadingUntilJoined = false,
-		joined,
+		joinedOverlay,
 		left,
 		onapiready,
 		onjoin,
@@ -93,7 +95,7 @@ interact with the Jitsi instance directly without causing a re-render.
 
 	onMount(() => {
 		// check if we have a duplicate container
-		if (document.querySelectorAll('#jitsi-container').length > 1) {
+		if (document.querySelectorAll('#jitsi-iframe').length > 1) {
 			console.warn('Duplicate Jitsi container detected. This may lead to unexpected behavior.');
 		}
 	});
@@ -142,18 +144,44 @@ interact with the Jitsi instance directly without causing a re-render.
 	<script {src} onload={handleScriptLoad}></script>
 </svelte:head>
 
-<div class={['relative', classValue]}>
+<div class={['jitsi-container', classValue]}>
 	{#if showLoading}
-		<div class="absolute inset-0">{@render loading?.()}</div>
+		<div class="overlay-container">{@render loading?.()}</div>
 	{/if}
 
-	{#if joinedMeeting && api && joined}
-		<div class="absolute inset-0 pointer-events-none">{@render joined(api)}</div>
+	{#if joinedMeeting && api && joinedOverlay}
+		<div class="overlay-container passthrough">{@render joinedOverlay(api)}</div>
 	{/if}
 
 	{#if leftMeeting}
-		<div class="absolute inset-0">{@render left?.()}</div>
+		<div class="fill-container">{@render left?.()}</div>
 	{/if}
 
-	<div id="jitsi-container" bind:this={container} class={['w-full h-full min-w-0']}></div>
+	<div
+		id="jitsi-iframe"
+		bind:this={container}
+		class="fill-container"
+		style={leftMeeting ? 'display: none;' : undefined}
+	></div>
 </div>
+
+<style lang="css">
+	.jitsi-container {
+		position: relative;
+	}
+
+	.fill-container {
+		width: 100%;
+		height: 100%;
+		min-width: 0px;
+	}
+
+	.overlay-container {
+		position: absolute;
+		inset: 0;
+	}
+
+	.passthrough {
+		pointer-events: none;
+	}
+</style>