diff --git a/src/components/VideoPlayer.svelte b/src/components/VideoPlayer.svelte
index 2ed1038..07b476d 100644
--- a/src/components/VideoPlayer.svelte
+++ b/src/components/VideoPlayer.svelte
@@ -1,11 +1,27 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
 
   const dispatch = createEventDispatcher();
   export let url: string;
+
+  let visible = false;
+  onMount(() => {
+    visible = true;
+  });
+
+  function exit() {
+    if (visible == false) {
+      dispatch("exit");
+    }
+  }
 </script>
 
-<div class="videoPlayer" on:click={() => dispatch("exit")}>
+<div
+  class="videoPlayer"
+  on:click={() => (visible = false)}
+  class:visible
+  on:transitionend={() => exit()}
+>
   <!-- svelte-ignore a11y-media-has-caption -->
   <video controls autoplay src={url} />
 </div>
@@ -26,5 +42,11 @@
       left: 50%;
       transform: translate(-50%, -50%);
     }
+
+    transition: opacity 0.5s;
+    opacity: 0;
+    &.visible {
+      opacity: 1;
+    }
   }
 </style>