diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-collapser.js b/plugins/chat/assets/javascripts/discourse/components/chat-message-collapser.js
index a07a4f9462..3a6100e688 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-message-collapser.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-collapser.js
@@ -60,7 +60,7 @@ export default class ChatMessageCollapser extends Component {
         const videoAttributes = getVideoAttributes(e);
 
         if (this.siteSettings[`lazy_${videoAttributes.providerName}_enabled`]) {
-          const link = videoAttributes.url;
+          const link = escapeExpression(videoAttributes.url);
           const title = videoAttributes.title;
           const header = htmlSafe(
             `<a target="_blank" class="chat-message-collapser-link" rel="noopener noreferrer" href="${link}">${title}</a>`
diff --git a/plugins/chat/test/javascripts/acceptance/chat-live-pane-collapse-test.js b/plugins/chat/test/javascripts/acceptance/chat-live-pane-collapse-test.js
index 4674ac5072..c59e0ece4d 100644
--- a/plugins/chat/test/javascripts/acceptance/chat-live-pane-collapse-test.js
+++ b/plugins/chat/test/javascripts/acceptance/chat-live-pane-collapse-test.js
@@ -30,7 +30,7 @@ acceptance("Discourse Chat - Chat live pane collapse", function (needs) {
             id: 1,
             message: "https://www.youtube.com/watch?v=aOWkVdU4NH0",
             cooked:
-              '<div class="onebox lazyYT lazyYT-container" data-youtube-id="aOWkVdU4NH0" data-youtube-title="Picnic with my cat (shaved ice &amp; lemonade)" data-parameters="feature=oembed&amp;wmode=opaque"> <a href="https://www.youtube.com/watch?v=aOWkVdU4NH0" target="_blank" rel="nofollow ugc noopener"> <img class="ytp-thumbnail-image" src="/images/discourse-logo-sketch.png" title="Picnic with my cat (shaved ice &amp; lemonade)"></a></div>',
+              '<div class="youtube-onebox lazy-video-container" data-video-id="aOWkVdU4NH0" data-video-title="Picnic with my cat (shaved ice &amp; lemonade)" data-provider-name="youtube"> <a href="https://www.youtube.com/watch?v=aOWkVdU4NH0" target="_blank" rel="nofollow ugc noopener"> <img class="youtube-thumbnail" src="https://img.youtube.com/vi/aOWkVdU4NH0/maxresdefault.jpg" title="Picnic with my cat (shaved ice &amp; lemonade)"> </a> </div>',
             excerpt:
               '<a href="https://www.youtube.com/watch?v=aOWkVdU4NH0">[Picnic with my cat (shaved ice &amp; lemonade&hellip;</a>',
             created_at: "2021-07-20T08:14:16.950Z",
@@ -106,8 +106,9 @@ acceptance("Discourse Chat - Chat live pane collapse", function (needs) {
     );
   });
 
-  skip("can collapse and expand youtube chat", async function (assert) {
-    const youtubeContainer = ".chat-message-container[data-id='1'] .lazyYT";
+  skip("can collapse and expand videos in chat", async function (assert) {
+    const videoContainer =
+      ".chat-message-container[data-id='1'] .lazy-video-container";
     const expandImage =
       ".chat-message-container[data-id='1'] .chat-message-collapser-closed";
     const collapseImage =
@@ -115,19 +116,19 @@ acceptance("Discourse Chat - Chat live pane collapse", function (needs) {
 
     await visit("/chat/c/cat/1");
 
-    assert.ok(visible(youtubeContainer));
+    assert.ok(visible(videoContainer));
     assert.ok(visible(collapseImage), "the open arrow is shown");
     assert.notOk(exists(expandImage), "the close arrow is hidden");
 
     await click(collapseImage);
 
-    assert.notOk(visible(youtubeContainer));
+    assert.notOk(visible(videoContainer));
     assert.ok(visible(expandImage), "the close arrow is shown");
     assert.notOk(exists(collapseImage), "the open arrow is hidden");
 
     await click(expandImage);
 
-    assert.ok(visible(youtubeContainer));
+    assert.ok(visible(videoContainer));
     assert.ok(visible(collapseImage), "the open arrow is shown again");
     assert.notOk(exists(expandImage), "the close arrow is hidden again");
   });
diff --git a/plugins/chat/test/javascripts/components/chat-message-collapser-test.js b/plugins/chat/test/javascripts/components/chat-message-collapser-test.js
index 56be03b199..0025a99fdb 100644
--- a/plugins/chat/test/javascripts/components/chat-message-collapser-test.js
+++ b/plugins/chat/test/javascripts/components/chat-message-collapser-test.js
@@ -10,9 +10,9 @@ import { module, test } from "qunit";
 
 const youtubeCooked =
   "<p>written text</p>" +
-  '<div class="onebox lazyYT-container" data-youtube-id="ytId1" data-youtube-title="Cats are great">Vid 1</div>' +
+  '<div class="youtube-onebox lazy-video-container" data-video-id="ytId1" data-video-title="Cats are great" data-provider-name="youtube"> <a href="https://www.youtube.com/watch?v=ytId1"></a>Vid 1</div>' +
   "<p>more written text</p>" +
-  '<div class="onebox lazyYT-container" data-youtube-id="ytId2" data-youtube-title="Kittens are great">Vid 2</div>' +
+  '<div class="youtube-onebox lazy-video-container" data-video-id="ytId2" data-video-title="Kittens are great" data-provider-name="youtube"> <a href="https://www.youtube.com/watch?v=ytId2"></a>Vid 2</div>' +
   "<p>and even more</p>";
 
 const animatedImageCooked =
@@ -71,7 +71,13 @@ module(
     setupRenderingTest(hooks);
 
     test("escapes youtube header", async function (assert) {
-      this.set("cooked", youtubeCooked.replace("ytId1", evilString));
+      this.set(
+        "cooked",
+        youtubeCooked.replace(
+          "https://www.youtube.com/watch?v=ytId1",
+          `https://www.youtube.com/watch?v=${evilString}`
+        )
+      );
       await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
 
       assert.true(
@@ -124,7 +130,7 @@ module(
 
       await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
 
-      const youtubeDivs = queryAll(".onebox");
+      const youtubeDivs = queryAll(".youtube-onebox");
 
       assert.strictEqual(
         youtubeDivs.length,
@@ -138,11 +144,11 @@ module(
       );
 
       assert.false(
-        visible(".onebox[data-youtube-id='ytId1']"),
+        visible(".youtube-onebox[data-video-id='ytId1']"),
         "first youtube preview hidden"
       );
       assert.true(
-        visible(".onebox[data-youtube-id='ytId2']"),
+        visible(".youtube-onebox[data-video-id='ytId2']"),
         "second youtube preview still visible"
       );
 
@@ -160,11 +166,11 @@ module(
       );
 
       assert.true(
-        visible(".onebox[data-youtube-id='ytId1']"),
+        visible(".youtube-onebox[data-video-id='ytId1']"),
         "first youtube preview still visible"
       );
       assert.false(
-        visible(".onebox[data-youtube-id='ytId2']"),
+        visible(".youtube-onebox[data-video-id='ytId2']"),
         "second youtube preview hidden"
       );
 
diff --git a/plugins/chat/test/javascripts/components/chat-message-text-test.js b/plugins/chat/test/javascripts/components/chat-message-text-test.js
index f0ba6fcd14..b5f05f80bc 100644
--- a/plugins/chat/test/javascripts/components/chat-message-text-test.js
+++ b/plugins/chat/test/javascripts/components/chat-message-text-test.js
@@ -22,7 +22,7 @@ module("Discourse Chat | Component | chat-message-text", function (hooks) {
   test("shows collapsed", async function (assert) {
     this.set(
       "cooked",
-      '<div class="onebox lazyYT lazyYT-container" data-youtube-id="WaT_rLGuUr8" data-youtube-title="Japanese Katsu Curry (Pork Cutlet)"/>'
+      '<div class="youtube-onebox lazy-video-container" data-video-id="WaT_rLGuUr8" data-video-title="Japanese Katsu Curry (Pork Cutlet)" data-provider-name="youtube"/>'
     );
 
     await render(
@@ -51,7 +51,10 @@ module("Discourse Chat | Component | chat-message-text", function (hooks) {
   });
 
   test("shows edits - collapsible message", async function (assert) {
-    this.set("cooked", '<div class="onebox lazyYT-container"></div>');
+    this.set(
+      "cooked",
+      '<div class="youtube-onebox lazy-video-container"></div>'
+    );
 
     await render(
       hbs`<ChatMessageText @cooked={{this.cooked}} @edited={{true}} />`