feat: Add loom video embed support for help center articles (#9288)

* feat: Add loom support for helpcenter articles

* fix: responsiveness

* fix: style issues

* fix: review comments

* Update custom_markdown_renderer.rb

lib/custom_markdown_renderer.rb

@@ -1,5 +1,6 @@
 class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
   YOUTUBE_REGEX = %r{https?://(?:www\.)?(?:youtube\.com/watch\?v=|youtu\.be/)([^&/]+)}
+  LOOM_REGEX = %r{https?://(?:www\.)?loom\.com/share/([^&/]+)}
   VIMEO_REGEX = %r{https?://(?:www\.)?vimeo\.com/(\d+)}
   MP4_REGEX = %r{https?://(?:www\.)?.+\.(mp4)}
 
@@ -41,23 +42,19 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
 
   def render_embedded_content(node)
     link_url = node.url
+    embedding_methods = {
+      YOUTUBE_REGEX => :make_youtube_embed,
+      VIMEO_REGEX => :make_vimeo_embed,
+      MP4_REGEX => :make_video_embed,
+      LOOM_REGEX => :make_loom_embed
+    }
 
-    youtube_match = link_url.match(YOUTUBE_REGEX)
+    embedding_methods.each do |regex, method|
-    if youtube_match
+      match = link_url.match(regex)
-      out(make_youtube_embed(youtube_match))
+      if match
-      return true
+        out(send(method, match))
-    end
+        return true
-
+      end
-    vimeo_match = link_url.match(VIMEO_REGEX)
-    if vimeo_match
-      out(make_vimeo_embed(vimeo_match))
-      return true
-    end
-
-    mp4_match = link_url.match(MP4_REGEX)
-    if mp4_match
-      out(make_video_embed(link_url))
-      return true
     end
 
     false
@@ -76,28 +73,40 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
   def make_youtube_embed(youtube_match)
     video_id = youtube_match[1]
     %(
-      <iframe
+      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
-        width="560"
+       <iframe
-        height="315"
         src="https://www.youtube.com/embed/#{video_id}"
         frameborder="0"
+        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowfullscreen
+        allowfullscreen></iframe>
-      ></iframe>
+      </div>
+    )
+  end
+
+  def make_loom_embed(loom_match)
+    video_id = loom_match[1]
+    %(
+      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+        <iframe
+         src="https://www.loom.com/embed/#{video_id}"
+         frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen
+         style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+      </div>
     )
   end
 
   def make_vimeo_embed(vimeo_match)
     video_id = vimeo_match[1]
     %(
-      <iframe
+      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+       <iframe
         src="https://player.vimeo.com/video/#{video_id}"
-        width="640"
-        height="360"
         frameborder="0"
         allow="autoplay; fullscreen; picture-in-picture"
         allowfullscreen
-      ></iframe>
+        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+       </div>
     )
   end
 

spec/lib/custom_markdown_renderer_spec.rb

@@ -68,6 +68,20 @@ describe CustomMarkdownRenderer do
       end
     end
 
+    context 'when link is a Loom URL' do
+      let(:loom_url) { 'https://www.loom.com/share/VIDEO_ID' }
+
+      it 'renders an iframe with Loom embed code' do
+        output = render_markdown_link(loom_url)
+        expect(output).to include(`
+          <iframe
+            width="640"
+            height="360"
+            src="https://www.loom.com/embed/VIDEO_ID"
+        `)
+      end
+    end
+
     context 'when link is a Vimeo URL' do
       let(:vimeo_url) { 'https://vimeo.com/1234567' }