Embed youtube videos in bookmarks

app/assets/index.css

@@ -80,3 +80,17 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     content: "";
     padding: 0 0.25rem 0 0;
 }
+
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 */
+    height: 0;
+}
+.video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+}

app/decorators/bookmarks/decorator.rb

@@ -30,6 +30,16 @@ module Adamantium
             }
           end
         end
+
+        def youtube_embed
+          pattern = /watch[?]v=(\w*)/i
+          code = url.scan(pattern).flatten.first
+          if code
+            "<div class='video-container'><iframe width='100%' src='https://www.youtube.com/embed/#{code}' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowfullscreen></iframe></div>"
+          else
+            nil
+          end
+        end
       end
     end
   end

app/templates/bookmarks/show.html.slim

@@ -8,6 +8,9 @@ div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:
     p class="text-xl text-ellipsis overflow-hidden"
       = bookmark.url
 
+  div class="mb-6"
+    == bookmark.youtube_embed
+
   == bookmark.content
 
   - unless bookmark.cached_content.nil?

app/templates/shared/_bookmark.html.slim

@@ -10,6 +10,9 @@ div class="mb-4"
         == render("link_arrow")
   p class="e-content leading-relaxed md:text-lg text-gray-800 dark:text-gray-200"
     = bookmark.content
+
+  == bookmark.youtube_embed
+
   == render "shared/tags", tags: bookmark.tags
 
   p class="text-sm text-blue-400 mb-4"