From c3f16be5c4b0b6e04f95af8ffcd4cc2f7b2e4be6 Mon Sep 17 00:00:00 2001
From: Emilien <4016501+unixfox@users.noreply.github.com>
Date: Fri, 26 Jun 2026 17:51:13 +0200
Subject: [PATCH] Move error message and action links before video title

Error reason, subreason, and 'After which you should try to' links
now appear above the <h1> title, making them the first thing users
see when a video fails to play.
---
 src/invidious/views/embed.ecr | 14 +++++---------
 src/invidious/views/watch.ecr | 23 ++++++++++-------------
 2 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/invidious/views/embed.ecr b/src/invidious/views/embed.ecr
index efaed016..6f793b1d 100644
--- a/src/invidious/views/embed.ecr
+++ b/src/invidious/views/embed.ecr
@@ -34,15 +34,11 @@
 <% if video.reason.nil? %>
 <%= rendered "components/player" %>
 <% else %>
-<div id="player-container" class="h-box">
-    <div style="display:flex;align-items:center;justify-content:center;background-color:#000;width:100%;aspect-ratio:16/9">
-        <p style="color:#fff;font-size:1.2em;text-align:center">
-            <%= I18n.translate(preferences.locale, "error_from_youtube_unplayable") %><br/>
-            <strong><%= video.reason %></strong>
-            <% if video.subreason %><br/><%= video.subreason %><% end %>
-        </p>
-    </div>
-</div>
+<p>
+    <%= I18n.translate(preferences.locale, "error_from_youtube_unplayable") %>
+    <strong><%= video.reason %></strong>
+    <% if video.subreason %><br/><%= video.subreason %><% end %>
+</p>
 <% end %>
 <script src="/js/embed.js?v=<%= ASSET_COMMIT %>"></script>
 </body>
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 07a3344b..2bdeb2e0 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -75,19 +75,18 @@ we're going to need to do it here in order to allow for translations.
 <div id="player-container" class="h-box">
     <%= rendered "components/player" %>
 </div>
-<% else %>
-<div class="h-box">
-    <div style="display:flex;align-items:center;justify-content:center;background-color:#000;width:100%;aspect-ratio:16/9">
-        <p style="color:#fff;font-size:1.2em;text-align:center">
-            <%= I18n.translate(locale, "error_from_youtube_unplayable") %><br/>
-            <strong><%= video.reason %></strong>
-            <% if video.subreason %><br/><%= video.subreason %><% end %>
-        </p>
-    </div>
-</div>
 <% end %>
 
 <div class="h-box">
+    <% if video.reason %>
+        <h3>
+            <%= I18n.translate(locale, "error_from_youtube_unplayable") %> <%= video.reason %>
+        </h3>
+        <% if video.subreason %>
+        <p><%= video.subreason %></p>
+        <% end %>
+        <%= error_redirect_helper(env) %>
+    <% end %>
     <h1>
         <%= title %>
         <% if params.listen %>
@@ -107,9 +106,7 @@ we're going to need to do it here in order to allow for translations.
         </h3>
     <% end %>
 
-    <% if video.reason %>
-        <%= error_redirect_helper(env) %>
-    <% elsif video.premiere_timestamp.try &.> Time.utc %>
+    <% if video.premiere_timestamp.try &.> Time.utc %>
         <h3>
             <%= video.premiere_timestamp.try { |t| I18n.translate(locale, "Premieres in `x`", recode_date((t - Time.utc).ago, locale)) } %>
         </h3>