From c3f89c45b1eb4b97467749d52be1daf1432ee12a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 12 Feb 2026 09:16:56 +0000
Subject: [PATCH] Replace YouTube iframe with clickable thumbnail

- Changed YouTube embed URL from embed format to watch format
- Added ThumbnailUrl property to YouTubeVideoEmbedProjection using YouTube's standard thumbnail URL
- Updated MessageGroupTemplate to render thumbnail image with link instead of iframe
- Updated CSS to style thumbnail appropriately
- Updated test to check for anchor link and thumbnail image instead of iframe

Co-authored-by: Tyrrrz <1935960+Tyrrrz@users.noreply.github.com>
---
 .../Specs/HtmlEmbedSpecs.cs                   | 20 +++++++++++++++++--
 .../Embeds/YouTubeVideoEmbedProjection.cs     |  4 +++-
 .../Exporting/MessageGroupTemplate.cshtml     |  9 +++++++--
 .../Exporting/PreambleTemplate.cshtml         |  6 ++++--
 4 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/DiscordChatExporter.Cli.Tests/Specs/HtmlEmbedSpecs.cs b/DiscordChatExporter.Cli.Tests/Specs/HtmlEmbedSpecs.cs
index 207e8041..c8ce5183 100644
--- a/DiscordChatExporter.Cli.Tests/Specs/HtmlEmbedSpecs.cs
+++ b/DiscordChatExporter.Cli.Tests/Specs/HtmlEmbedSpecs.cs
@@ -181,8 +181,24 @@ public class HtmlEmbedSpecs
         );
 
         // Assert
-        var iframeUrl = message.QuerySelector("iframe")?.GetAttribute("src");
-        iframeUrl.Should().StartWith("https://www.youtube.com/embed/qOWW4OlgbvE");
+        var youtubeLink = message
+            .QuerySelectorAll("a")
+            .FirstOrDefault(e =>
+                e.GetAttribute("href")?.Contains("youtube.com/watch?v=", StringComparison.Ordinal)
+                == true
+            );
+
+        youtubeLink.Should().NotBeNull();
+        youtubeLink?.GetAttribute("href").Should().Contain("qOWW4OlgbvE");
+
+        // Check that the thumbnail image exists
+        var thumbnail = youtubeLink
+            ?.QuerySelectorAll("img")
+            .FirstOrDefault(e =>
+                e.GetAttribute("class")?.Contains("chatlog__embed-youtube-thumbnail") == true
+            );
+
+        thumbnail.Should().NotBeNull();
     }
 
     [Fact]
diff --git a/DiscordChatExporter.Core/Discord/Data/Embeds/YouTubeVideoEmbedProjection.cs b/DiscordChatExporter.Core/Discord/Data/Embeds/YouTubeVideoEmbedProjection.cs
index ce13bdfd..ec39bbb2 100644
--- a/DiscordChatExporter.Core/Discord/Data/Embeds/YouTubeVideoEmbedProjection.cs
+++ b/DiscordChatExporter.Core/Discord/Data/Embeds/YouTubeVideoEmbedProjection.cs
@@ -2,7 +2,9 @@
 
 public partial record YouTubeVideoEmbedProjection(string VideoId)
 {
-    public string Url { get; } = $"https://www.youtube.com/embed/{VideoId}";
+    public string Url { get; } = $"https://www.youtube.com/watch?v={VideoId}";
+
+    public string ThumbnailUrl { get; } = $"https://i.ytimg.com/vi/{VideoId}/maxresdefault.jpg";
 }
 
 public partial record YouTubeVideoEmbedProjection
diff --git a/DiscordChatExporter.Core/Exporting/MessageGroupTemplate.cshtml b/DiscordChatExporter.Core/Exporting/MessageGroupTemplate.cshtml
index e27fad2b..5e5741b4 100644
--- a/DiscordChatExporter.Core/Exporting/MessageGroupTemplate.cshtml
+++ b/DiscordChatExporter.Core/Exporting/MessageGroupTemplate.cshtml
@@ -424,9 +424,14 @@
                                                 </div>
                                             }
 
-                                            @* Video player *@
+                                            @* Video thumbnail *@
                                             <div class="chatlog__embed-youtube-container">
-                                                <iframe class="chatlog__embed-youtube" src="@youTubeVideoEmbed.Url" width="400" height="225"></iframe>
+                                                <a href="@youTubeVideoEmbed.Url">
+                                                    @{
+                                                        var thumbnailUrl = embed.Thumbnail?.ProxyUrl ?? embed.Thumbnail?.Url ?? youTubeVideoEmbed.ThumbnailUrl;
+                                                    }
+                                                    <img class="chatlog__embed-youtube-thumbnail" src="@await ResolveAssetUrlAsync(thumbnailUrl)" alt="YouTube video thumbnail" loading="lazy" onerror="this.style.visibility='hidden'" data-canonical-url="@thumbnailUrl">
+                                                </a>
                                             </div>
                                         </div>
                                     </div>
diff --git a/DiscordChatExporter.Core/Exporting/PreambleTemplate.cshtml b/DiscordChatExporter.Core/Exporting/PreambleTemplate.cshtml
index 9e746e16..792612c7 100644
--- a/DiscordChatExporter.Core/Exporting/PreambleTemplate.cshtml
+++ b/DiscordChatExporter.Core/Exporting/PreambleTemplate.cshtml
@@ -711,9 +711,11 @@
             margin-top: 0.6rem;
         }
 
-        .chatlog__embed-youtube {
-            border: 0;
+        .chatlog__embed-youtube-thumbnail {
+            max-width: 400px;
+            max-height: 225px;
             border-radius: 3px;
+            cursor: pointer;
         }
 
         .chatlog__sticker {