diff --git a/app/templates/posts/show.html.slim b/app/templates/posts/show.html.slim
index 29fcf3c..9919173 100644
--- a/app/templates/posts/show.html.slim
+++ b/app/templates/posts/show.html.slim
@@ -22,7 +22,7 @@ article class="h-entry"
         a class="dark:text-gray-400" href="/places" places
       - if post.photos? || post.videos?
         a class="dark:text-gray-400" href="/photos" photos
-    article class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline prose-img:rounded"
+    article class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline prose-img:rounded prose-video:rounded"
       div class="e-content"
         == post.content
 
diff --git a/public/assets/index.js b/public/assets/index.js
index 4b66fd4..1bc9936 100644
--- a/public/assets/index.js
+++ b/public/assets/index.js
@@ -26,41 +26,50 @@
             }
         });
 
-    const mapContainer = document.getElementById("map");
-    const goBack = document.getElementById("go-back");
-    if (mapContainer !== null) {
-        if (goBack !== null) {
-            document.getElementById("go-back").addEventListener("click", () => {
-            history.back();
+        const videos = document.querySelectorAll('video');
+        videos.forEach((video) => {
+            video.addEventListener("click", () => {
+              const isPaused = video.paused;
+              video[isPaused ? "play" : "pause"]();
+              video.classList.toggle("u-none", !isPaused);
             });
-        }
-
-        mapboxgl.accessToken = 'pk.eyJ1IjoiZG5pdHphIiwiYSI6ImNsZWIyY3ZzaTE0cjUzdm4xdnZ6czRlYjUifQ.FRETOXYRID6T2IoB7qqRLg';
-        var map = new mapboxgl.Map({
-            container: 'map',
-            style: 'mapbox://styles/mapbox/streets-v11',
-            maxZoom: 8
         });
 
-        const markers = JSON.parse(mapContainer.dataset["markers"]);
+        const mapContainer = document.getElementById("map");
+        const goBack = document.getElementById("go-back");
+        if (mapContainer !== null) {
+            if (goBack !== null) {
+                document.getElementById("go-back").addEventListener("click", () => {
+                history.back();
+                });
+            }
 
-        const bounds = new mapboxgl.LngLatBounds(markers[0], markers[0]);
+            mapboxgl.accessToken = 'pk.eyJ1IjoiZG5pdHphIiwiYSI6ImNsZWIyY3ZzaTE0cjUzdm4xdnZ6czRlYjUifQ.FRETOXYRID6T2IoB7qqRLg';
+            var map = new mapboxgl.Map({
+                container: 'map',
+                style: 'mapbox://styles/mapbox/streets-v11',
+                maxZoom: 8
+            });
 
-        for (var i = 0; i < markers.length; i++) {
-            bounds.extend(markers[i]);
+            const markers = JSON.parse(mapContainer.dataset["markers"]);
+
+            const bounds = new mapboxgl.LngLatBounds(markers[0], markers[0]);
+
+            for (var i = 0; i < markers.length; i++) {
+                bounds.extend(markers[i]);
+            }
+
+            map.fitBounds(bounds, { padding: 60 });
+
+            for (var i = 0; i < markers.length; i++) {
+                const marker = markers[i];
+                const el = document.createElement("div");
+                el.className = "map-marker";
+
+                new mapboxgl.Marker(el)
+                    .setLngLat(marker)
+                    .addTo(map);
+            }
         }
-
-        map.fitBounds(bounds, { padding: 60 });
-
-        for (var i = 0; i < markers.length; i++) {
-            const marker = markers[i];
-            const el = document.createElement("div");
-            el.className = "map-marker";
-
-            new mapboxgl.Marker(el)
-                .setLngLat(marker)
-                .addTo(map);
-        }
-    }
     });
 })();