feat: use nocookie version of youtube & vimeo for help center embeds (#11061)

This pull request includes changes to the `CustomMarkdownRenderer` class
and its corresponding tests to support YouTube's "nocookie"
[[ref](https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-enhanced-mode)]
URLs and adding the `dnt` param to Vimeo embed
[[ref](https://help.vimeo.com/hc/en-us/articles/12426260232977-About-Player-parameters)].

![CleanShot 2025-03-11 at 19 39
36@2x](https://github.com/user-attachments/assets/e7a3e9b1-35a6-4c8c-bdc2-005f773b3d04)

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

lib/custom_markdown_renderer.rb

@@ -79,7 +79,7 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
     %(
       <div style="position: relative; padding-bottom: 62.5%; height: 0;">
        <iframe
-        src="https://www.youtube.com/embed/#{video_id}"
+        src="https://www.youtube-nocookie.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"
@@ -105,7 +105,7 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
     %(
       <div style="position: relative; padding-bottom: 62.5%; height: 0;">
        <iframe
-        src="https://player.vimeo.com/video/#{video_id}"
+        src="https://player.vimeo.com/video/#{video_id}?dnt=true"
         frameborder="0"
         allow="autoplay; fullscreen; picture-in-picture"
         allowfullscreen

spec/lib/custom_markdown_renderer_spec.rb

@@ -59,12 +59,8 @@ describe CustomMarkdownRenderer do
 
       it 'renders an iframe with YouTube embed code' do
         output = render_markdown_link(youtube_url)
-        expect(output).to include(`
+        expect(output).to include('src="https://www.youtube-nocookie.com/embed/VIDEO_ID"')
-          <iframe
+        expect(output).to include('allowfullscreen')
-            width="560"
-            height="315"
-            src="https://www.youtube.com/embed/VIDEO_ID"
-        `)
       end
     end
 
@@ -73,12 +69,8 @@ describe CustomMarkdownRenderer do
 
       it 'renders an iframe with Loom embed code' do
         output = render_markdown_link(loom_url)
-        expect(output).to include(`
+        expect(output).to include('src="https://www.loom.com/embed/VIDEO_ID"')
-          <iframe
+        expect(output).to include('webkitallowfullscreen mozallowfullscreen allowfullscreen')
-            width="640"
-            height="360"
-            src="https://www.loom.com/embed/VIDEO_ID"
-        `)
       end
     end
 
@@ -87,10 +79,8 @@ describe CustomMarkdownRenderer do
 
       it 'renders an iframe with Vimeo embed code' do
         output = render_markdown_link(vimeo_url)
-        expect(output).to include(`
+        expect(output).to include('src="https://player.vimeo.com/video/1234567?dnt=true"')
-          <iframe
+        expect(output).to include('allowfullscreen')
-            src="https://player.vimeo.com/video/1234567"
-        `)
       end
     end
 
@@ -99,12 +89,8 @@ describe CustomMarkdownRenderer do
 
       it 'renders a video element with the MP4 source' do
         output = render_markdown_link(mp4_url)
-        expect(output).to match(`
+        expect(output).to include('<video width="640" height="360" controls')
-          <video width="640" height="360" controls >
+        expect(output).to include('<source src="https://example.com/video.mp4" type="video/mp4">')
-            <source src="https://example.com/video.mp4" type="video/mp4">
-            Your browser does not support the video tag.
-          </video>
-        `)
       end
     end
 
@@ -121,8 +107,8 @@ describe CustomMarkdownRenderer do
       it 'renders all links when present between empty lines' do
         markdown = "\n[youtube](https://www.youtube.com/watch?v=VIDEO_ID)\n\n[vimeo](https://vimeo.com/1234567)\n^ hello ^ [normal](https://example.com)"
         output = render_markdown(markdown)
-        expect(output).to include('src="https://www.youtube.com/embed/VIDEO_ID"')
+        expect(output).to include('src="https://www.youtube-nocookie.com/embed/VIDEO_ID"')
-        expect(output).to include('src="https://player.vimeo.com/video/1234567"')
+        expect(output).to include('src="https://player.vimeo.com/video/1234567?dnt=true"')
         expect(output).to include('<a href="https://example.com">')
         expect(output).to include('<sup> hello </sup>')
       end
@@ -130,11 +116,11 @@ describe CustomMarkdownRenderer do
 
     context 'when links within text are present' do
       it 'renders only text within blank lines as embeds' do
-        markdown = "\n[youtube](https://www.youtube.com/watch?v=VIDEO_ID)\nthis is such an amazing [vimeo](https://vimeo.com/1234567)\n[vimeo](https://vimeo.com/1234567)"
+        markdown = "\n[youtube](https://www.youtube.com/watch?v=VIDEO_ID)\nthis is such an amazing [vimeo](https://vimeo.com/1234567)\n[vimeo](https://vimeo.com/1234567)\n"
         output = render_markdown(markdown)
-        expect(output).to include('src="https://www.youtube.com/embed/VIDEO_ID"')
+        expect(output).to include('src="https://www.youtube-nocookie.com/embed/VIDEO_ID"')
+        expect(output).to include('src="https://player.vimeo.com/video/1234567?dnt=true"')
         expect(output).to include('href="https://vimeo.com/1234567"')
-        expect(output).to include('src="https://player.vimeo.com/video/1234567"')
       end
     end
 
@@ -162,7 +148,7 @@ describe CustomMarkdownRenderer do
         markdown = "\n[arcade](https://app.arcade.software/share/ARCADE_ID)\n\n[youtube](https://www.youtube.com/watch?v=VIDEO_ID)\n"
         output = render_markdown(markdown)
         expect(output).to include('src="https://app.arcade.software/embed/ARCADE_ID"')
-        expect(output).to include('src="https://www.youtube.com/embed/VIDEO_ID"')
+        expect(output).to include('src="https://www.youtube-nocookie.com/embed/VIDEO_ID"')
       end
     end
   end