diff --git a/binaries/data/mods/public/gui/session/session.js b/binaries/data/mods/public/gui/session/session.js
index 890bcbfc8c..d543f1e872 100644
--- a/binaries/data/mods/public/gui/session/session.js
+++ b/binaries/data/mods/public/gui/session/session.js
@@ -629,6 +629,10 @@ function onTick()
 
 	updateTimers();
 	Engine.GuiInterfaceCall("ClearRenamedEntities");
+
+	let isPlayingCinemaPath = GetSimState().cinemaPlaying && !g_Disconnected;
+	if (isPlayingCinemaPath)
+		updateCinemaOverlay();
 }
 
 function onSimulationUpdate()
@@ -675,9 +679,30 @@ function updateCinemaPath()
 	let isPlayingCinemaPath = GetSimState().cinemaPlaying && !g_Disconnected;
 
 	Engine.GetGUIObjectByName("session").hidden = !g_ShowGUI || isPlayingCinemaPath;
+	Engine.GetGUIObjectByName("cinemaOverlay").hidden = !isPlayingCinemaPath;
 	Engine.ConfigDB_CreateValue("user", "silhouettes", !isPlayingCinemaPath && Engine.ConfigDB_GetValue("user", "silhouettes") == "true" ? "true" : "false");
 }
 
+function updateCinemaOverlay()
+{
+	let cinemaOverlay = Engine.GetGUIObjectByName("cinemaOverlay");
+	let width = cinemaOverlay.getComputedSize().right;
+	let height = cinemaOverlay.getComputedSize().bottom;
+	let barHeight = (height - width / 2.39) / 2;
+	if (barHeight < 0)
+		barHeight = 0;
+
+	let cinemaBarTop = Engine.GetGUIObjectByName("cinemaBarTop");
+	let cinemaBarTopSize = cinemaBarTop.size;
+	cinemaBarTopSize.bottom = barHeight;
+	cinemaBarTop.size = cinemaBarTopSize;
+
+	let cinemaBarBottom = Engine.GetGUIObjectByName("cinemaBarBottom");
+	let cinemaBarBottomSize = cinemaBarBottom.size;
+	cinemaBarBottomSize.top = -barHeight;
+	cinemaBarBottom.size = cinemaBarBottomSize;
+}
+
 // TODO: Use event subscription onSimulationUpdate, onEntitySelectionChange, onPlayerViewChange, ... instead
 function updateGUIObjects()
 {
diff --git a/binaries/data/mods/public/gui/session/session.xml b/binaries/data/mods/public/gui/session/session.xml
index 4cdaef004b..320fb72d4c 100644
--- a/binaries/data/mods/public/gui/session/session.xml
+++ b/binaries/data/mods/public/gui/session/session.xml
@@ -117,4 +117,10 @@
 <!-- Selection bandbox -->
 <object name="bandbox" type="image" sprite="bandbox" ghost="true" hidden="true" z="200"/>
 
+<!-- Cinema overlay -->
+<object name="cinemaOverlay" hidden="true" ghost="true">
+	<object name="cinemaBarTop" type="image" sprite="color:0 0 0 255" size="0 0 100% 100" ghost="true"/>
+	<object name="cinemaBarBottom" type="image" sprite="color:0 0 0 255" size="0 100%-100 100% 100%" ghost="true"/>
+</object>
+
 </objects>
diff --git a/source/graphics/CinemaManager.cpp b/source/graphics/CinemaManager.cpp
index 76a13b642b..919148c3e6 100644
--- a/source/graphics/CinemaManager.cpp
+++ b/source/graphics/CinemaManager.cpp
@@ -1,4 +1,4 @@
-/* Copyright (C) 2020 Wildfire Games.
+/* Copyright (C) 2021 Wildfire Games.
  * This file is part of 0 A.D.
  *
  * 0 A.D. is free software: you can redistribute it and/or modify
@@ -64,9 +64,7 @@ void CCinemaManager::Update(const float deltaRealTime) const
 
 void CCinemaManager::Render() const
 {
-	if (IsEnabled())
-		DrawBars();
-	else if (m_DrawPaths)
+	if (!IsEnabled() && m_DrawPaths)
 		DrawPaths();
 }
 
@@ -183,57 +181,6 @@ void CCinemaManager::DrawNodes(const RNSpline& spline, const CColor& nodeColor)
 #endif
 }
 
-void CCinemaManager::DrawBars() const
-{
-	int height = (float)g_xres / 2.39f;
-	int shift = (g_yres - height) / 2;
-	if (shift <= 0)
-		return;
-
-#if CONFIG2_GLES
-	#warning TODO : implement bars for GLES
-#else
-	// Set up transform for GL bars
-	glMatrixMode(GL_PROJECTION);
-	glPushMatrix();
-	glLoadIdentity();
-	glMatrixMode(GL_MODELVIEW);
-	glPushMatrix();
-	glLoadIdentity();
-	CMatrix3D transform;
-	transform.SetOrtho(0.f, (float)g_xres, 0.f, (float)g_yres, -1.f, 1000.f);
-	glLoadMatrixf(&transform._11);
-
-	glColor4f(0.0f, 0.0f, 0.0f, 1.0f);
-
-	glEnable(GL_BLEND);
-	glDisable(GL_DEPTH_TEST);
-
-	glBegin(GL_QUADS);
-	glVertex2i(0, 0);
-	glVertex2i(g_xres, 0);
-	glVertex2i(g_xres, shift);
-	glVertex2i(0, shift);
-	glEnd();
-
-	glBegin(GL_QUADS);
-	glVertex2i(0, g_yres - shift);
-	glVertex2i(g_xres, g_yres - shift);
-	glVertex2i(g_xres, g_yres);
-	glVertex2i(0, g_yres);
-	glEnd();
-
-	glDisable(GL_BLEND);
-	glEnable(GL_DEPTH_TEST);
-
-	// Restore transform
-	glMatrixMode(GL_PROJECTION);
-	glPopMatrix();
-	glMatrixMode(GL_MODELVIEW);
-	glPopMatrix();
-#endif
-}
-
 bool CCinemaManager::IsEnabled() const
 {
 	CmpPtr<ICmpCinemaManager> cmpCinemaManager(g_Game->GetSimulation2()->GetSimContext().GetSystemEntity());
diff --git a/source/graphics/CinemaManager.h b/source/graphics/CinemaManager.h
index 45a9fc1339..b85f9b2822 100644
--- a/source/graphics/CinemaManager.h
+++ b/source/graphics/CinemaManager.h
@@ -1,4 +1,4 @@
-/* Copyright (C) 2019 Wildfire Games.
+/* Copyright (C) 2021 Wildfire Games.
  * This file is part of 0 A.D.
  *
  * 0 A.D. is free software: you can redistribute it and/or modify
@@ -37,7 +37,6 @@ public:
 	 * Renders black bars and paths (if enabled)
 	 */
 	void Render() const;
-	void DrawBars() const;
 	void DrawPaths() const;
 	void DrawSpline(const RNSpline& spline, const CColor& splineColor, int smoothness, bool lines) const;
 	void DrawNodes(const RNSpline& spline, const CColor& nodesColor) const;