From b687b52dffdb96ce5b48edc62a95a5c4ca1c9e1d Mon Sep 17 00:00:00 2001
From: rejaad <rejaad95@gmail.com>
Date: Sun, 31 May 2026 23:09:47 -0500
Subject: [PATCH 1/4] Fix YouTube embeds failing with Error 153 in the desktop
 app

YouTube /embed iframes in project descriptions fail to play inside the
Tauri desktop app with "Video player configuration error" (Error 153),
while working fine on the website. The cause is the app's document origin
(tauri://localhost) which YouTube's embedded player rejects.

Inject origin=https://modrinth.com into allowed YouTube embed URLs in the
shared markdown sanitizer so the player receives a valid web origin. This
is applied in the same code path used by both the website and the app, and
is a no-op on the website (already served from modrinth.com). Also allow
the referrerpolicy attribute on iframes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/utils/parse.ts | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/utils/parse.ts b/packages/utils/parse.ts
index 4d15153912..46c36b1607 100644
--- a/packages/utils/parse.ts
+++ b/packages/utils/parse.ts
@@ -16,7 +16,7 @@ export const configuredXss = new FilterXSS({
 		h6: ['id'],
 		kbd: ['id'],
 		input: ['checked', 'disabled', 'type'],
-		iframe: ['width', 'height', 'allowfullscreen', 'frameborder', 'start', 'end'],
+		iframe: ['width', 'height', 'allowfullscreen', 'frameborder', 'start', 'end', 'referrerpolicy'],
 		img: [...(whiteList.img || []), 'usemap', 'style', 'align'],
 		map: ['name'],
 		area: [...(whiteList.a || []), 'coords'],
@@ -38,10 +38,18 @@ export const configuredXss = new FilterXSS({
 	onIgnoreTagAttr: (tag, name, value) => {
 		// Allow iframes from acceptable sources
 		if (tag === 'iframe' && name === 'src') {
-			const allowedSources = [
+			const allowedSources: {
+				url: RegExp
+				allowedParameters: RegExp[]
+				forcedParameters?: Record<string, string>
+			}[] = [
 				{
 					url: /^https?:\/\/(www\.)?youtube(-nocookie)?\.com\/embed\/[a-zA-Z0-9_-]{11}/,
 					allowedParameters: [/start=\d+/, /end=\d+/],
+					// Force a valid web origin so embeds work inside the Tauri webview,
+					// whose document origin (tauri://localhost) YouTube otherwise rejects
+					// with "Video player configuration error" (Error 153).
+					forcedParameters: { origin: 'https://modrinth.com' },
 				},
 				{
 					url: /^https?:\/\/(www\.)?discord\.com\/widget/,
@@ -64,6 +72,12 @@ export const configuredXss = new FilterXSS({
 						}
 					})
 
+					if (source.forcedParameters) {
+						for (const [key, paramValue] of Object.entries(source.forcedParameters)) {
+							newSearchParams.set(key, paramValue)
+						}
+					}
+
 					url.search = newSearchParams.toString()
 					return `${name}="${escapeAttrValue(url.toString())}"`
 				}

From b0c909c25200091d2ccfd9ff2dc07085f6f332ff Mon Sep 17 00:00:00 2001
From: rejaad <rejaad95@gmail.com>
Date: Mon, 1 Jun 2026 12:38:59 -0500
Subject: [PATCH 2/4] Force origin + referrerpolicy on YouTube embeds in
 markdown

First attempt at fixing YouTube embeds failing with Error 153 in the
desktop app: inject origin=https://modrinth.com into allowed YouTube
embed URLs and add referrerpolicy="unsafe-url" to the iframe via the
shared markdown sanitizer.

This alone does not fix macOS: WKWebView refuses to send any Referer for
a cross-origin subframe when the parent document loads from the custom
tauri://localhost scheme, regardless of referrerpolicy. Kept because it
is harmless on the website and correct for platforms that do send a
referrer. The working macOS fix follows in later commits.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/utils/highlightjs/index.ts | 28 +++++++++++++++-------------
 packages/utils/parse.ts             | 17 ++++++++++++++++-
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/packages/utils/highlightjs/index.ts b/packages/utils/highlightjs/index.ts
index dbfbae0892..5e3e2c7d00 100644
--- a/packages/utils/highlightjs/index.ts
+++ b/packages/utils/highlightjs/index.ts
@@ -17,7 +17,7 @@ import xml from 'highlight.js/lib/languages/xml'
 import yaml from 'highlight.js/lib/languages/yaml'
 import mcfunction from 'highlightjs-mcfunction'
 
-import { configuredXss, md } from '../parse'
+import { configuredXss, injectEmbedReferrerPolicy, md } from '../parse'
 import skript from './skript'
 
 /* REGISTRATION */
@@ -58,20 +58,22 @@ hljs.registerAliases(['html', 'htm', 'xhtml', 'mcui', 'fxml'], { languageName: '
 export { hljs }
 
 export const renderHighlightedString = (string) =>
-	configuredXss.process(
-		md({
-			highlight(str, lang) {
-				if (lang && hljs.getLanguage(lang)) {
-					try {
-						return hljs.highlight(str, { language: lang }).value
-					} catch {
-						/* empty */
+	injectEmbedReferrerPolicy(
+		configuredXss.process(
+			md({
+				highlight(str, lang) {
+					if (lang && hljs.getLanguage(lang)) {
+						try {
+							return hljs.highlight(str, { language: lang }).value
+						} catch {
+							/* empty */
+						}
 					}
-				}
 
-				return ''
-			},
-		}).render(string),
+					return ''
+				},
+			}).render(string),
+		),
 	)
 
 export const highlightCodeLines = (code: string, language: string): string[] => {
diff --git a/packages/utils/parse.ts b/packages/utils/parse.ts
index 46c36b1607..3f1094c4a1 100644
--- a/packages/utils/parse.ts
+++ b/packages/utils/parse.ts
@@ -199,4 +199,19 @@ export const md = (options = {}) => {
 	return md
 }
 
-export const renderString = (string: string) => configuredXss.process(md().render(string))
+// WKWebView (macOS) loads the app from a custom `tauri://localhost` scheme and
+// will not attach a Referer to cross-origin subframes, which makes YouTube embeds
+// fail with "Video player configuration error" (Error 153). Forcing
+// `referrerpolicy="unsafe-url"` asks the engine to send the fullest referrer it
+// can, which YouTube accepts. Applied after sanitization so it only touches
+// iframes the allow-list already validated.
+export const injectEmbedReferrerPolicy = (html: string) =>
+	html.replace(/<iframe\b(?![^>]*\breferrerpolicy=)([^>]*?)>/gi, (match, attrs) => {
+		if (!/\bsrc=["'][^"']*youtube(-nocookie)?\.com\/embed\//i.test(attrs)) {
+			return match
+		}
+		return `<iframe referrerpolicy="unsafe-url"${attrs}>`
+	})
+
+export const renderString = (string: string) =>
+	injectEmbedReferrerPolicy(configuredXss.process(md().render(string)))

From b4d830fec35161369e7c9b2d4f10a94896fe1f87 Mon Sep 17 00:00:00 2001
From: rejaad <rejaad95@gmail.com>
Date: Mon, 1 Jun 2026 12:39:10 -0500
Subject: [PATCH 3/4] Add in-app YouTube video overlay command (macOS Error 153
 fix)

Inline YouTube embeds cannot play in the app on macOS because the
tauri://localhost parent never sends a Referer to the cross-origin
iframe. Add open_video_overlay / close_video_overlay commands that load
the standard watch?v= page in a child webview (a real top-level origin,
so playback works) positioned centered over the main window, reusing the
ads webview child pattern.

An injected script (youtube-theater.js) hides YouTube's chrome and
expands the player to fill the popup, so the overlay shows only the
video. Commands are registered in build.rs for ACL permission
generation.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/app/build.rs                   |   2 +
 apps/app/src/api/utils.rs           | 116 +++++++++++++++++++++++++++-
 apps/app/src/api/youtube-theater.js |  85 ++++++++++++++++++++
 3 files changed, 202 insertions(+), 1 deletion(-)
 create mode 100644 apps/app/src/api/youtube-theater.js

diff --git a/apps/app/build.rs b/apps/app/build.rs
index f4d8c14a7b..e18170a3eb 100644
--- a/apps/app/build.rs
+++ b/apps/app/build.rs
@@ -243,6 +243,8 @@ fn main() {
                         "should_disable_mouseover",
                         "highlight_in_folder",
                         "open_path",
+                        "open_video_overlay",
+                        "close_video_overlay",
                         "show_launcher_logs_folder",
                         "progress_bars_list",
                         "get_opening_command",
diff --git a/apps/app/src/api/utils.rs b/apps/app/src/api/utils.rs
index a2b013ae3c..fdac1da02f 100644
--- a/apps/app/src/api/utils.rs
+++ b/apps/app/src/api/utils.rs
@@ -1,5 +1,6 @@
 use serde::{Deserialize, Serialize};
-use tauri::Runtime;
+use tauri::webview::{NewWindowResponse, WebviewBuilder};
+use tauri::{Manager, PhysicalPosition, PhysicalSize, Runtime, WebviewUrl};
 use tauri_plugin_opener::OpenerExt;
 use theseus::{
     handler,
@@ -20,6 +21,8 @@ pub fn init<R: Runtime>() -> tauri::plugin::TauriPlugin<R> {
             should_disable_mouseover,
             highlight_in_folder,
             open_path,
+            open_video_overlay,
+            close_video_overlay,
             show_launcher_logs_folder,
             progress_bars_list,
             get_opening_command
@@ -109,6 +112,117 @@ pub async fn open_path<R: Runtime>(app: tauri::AppHandle<R>, path: PathBuf) {
     .ok();
 }
 
+const VIDEO_WEBVIEW_LABEL: &str = "video-overlay";
+
+fn is_valid_video_id(video_id: &str) -> bool {
+    !video_id.is_empty()
+        && video_id.len() <= 16
+        && video_id
+            .chars()
+            .all(|c| c.is_ascii_alphanumeric() || c == '_' || c == '-')
+}
+
+/// Computes the centered video rect (16:9) within the main window, leaving a
+/// margin so the surrounding backdrop and the close button stay visible.
+fn video_overlay_rect(
+    window_size: PhysicalSize<u32>,
+) -> (PhysicalPosition<i32>, PhysicalSize<u32>) {
+    let win_w = window_size.width as f32;
+    let win_h = window_size.height as f32;
+
+    // Use at most 80% of each dimension, keeping a 16:9 aspect ratio.
+    let max_w = win_w * 0.8;
+    let max_h = win_h * 0.8;
+    let mut width = max_w;
+    let mut height = width * 9.0 / 16.0;
+    if height > max_h {
+        height = max_h;
+        width = height * 16.0 / 9.0;
+    }
+
+    let x = ((win_w - width) / 2.0).max(0.0);
+    let y = ((win_h - height) / 2.0).max(0.0);
+
+    (
+        PhysicalPosition::new(x as i32, y as i32),
+        PhysicalSize::new(width as u32, height as u32),
+    )
+}
+
+/// Opens a YouTube video as an in-app overlay webview centered over the main
+/// window.
+///
+/// Inline YouTube `/embed` iframes fail with "Video player configuration error"
+/// (Error 153) inside the app, because the main webview loads from a custom
+/// `tauri://localhost` scheme and macOS WKWebView refuses to attach a `Referer`
+/// to the cross-origin subframe. Loading the standard `watch?v=` page in a
+/// separate child webview gives YouTube a real origin, so playback works. The
+/// frontend draws a dimmed backdrop and close button behind/around it.
+#[tauri::command]
+pub async fn open_video_overlay<R: Runtime>(
+    app: tauri::AppHandle<R>,
+    video_id: String,
+) -> Result<()> {
+    if !is_valid_video_id(&video_id) {
+        tracing::error!(
+            "Refusing to open invalid YouTube video id: {video_id}"
+        );
+        return Ok(());
+    }
+
+    let Some(window) = app.get_window("main") else {
+        return Ok(());
+    };
+
+    let url: Url = format!("https://www.youtube.com/watch?v={video_id}")
+        .parse()
+        .map_err(|_| {
+            TheseusSerializableError::Theseus(
+                theseus::ErrorKind::OtherError(
+                    "Failed to parse video URL".to_string(),
+                )
+                .as_error(),
+            )
+        })?;
+
+    let (position, size) = video_overlay_rect(window.inner_size()?);
+
+    if let Some(webview) = app.webviews().get(VIDEO_WEBVIEW_LABEL) {
+        webview.navigate(url)?;
+        webview.set_size(size)?;
+        webview.set_position(position)?;
+        webview.show().ok();
+    } else {
+        window.add_child(
+            WebviewBuilder::new(VIDEO_WEBVIEW_LABEL, WebviewUrl::External(url))
+                .initialization_script_for_all_frames(include_str!(
+                    "youtube-theater.js"
+                ))
+                .zoom_hotkeys_enabled(false)
+                .on_new_window(|_, _| NewWindowResponse::Deny),
+            position,
+            size,
+        )?;
+    }
+
+    Ok(())
+}
+
+/// Hides the in-app video overlay webview (moved offscreen and hidden).
+#[tauri::command]
+pub async fn close_video_overlay<R: Runtime>(app: tauri::AppHandle<R>) {
+    if let Some(webview) = app.webviews().get(VIDEO_WEBVIEW_LABEL) {
+        // Navigate away first so audio stops, then hide offscreen.
+        if let Ok(url) = "about:blank".parse() {
+            let _ = webview.navigate(url);
+        }
+        webview
+            .set_position(PhysicalPosition::new(-10000, -10000))
+            .ok();
+        webview.hide().ok();
+    }
+}
+
 #[tauri::command]
 pub async fn show_launcher_logs_folder<R: Runtime>(app: tauri::AppHandle<R>) {
     if let Some(d) = DirectoryInfo::global_handle_if_ready() {
diff --git a/apps/app/src/api/youtube-theater.js b/apps/app/src/api/youtube-theater.js
new file mode 100644
index 0000000000..74b87a33c4
--- /dev/null
+++ b/apps/app/src/api/youtube-theater.js
@@ -0,0 +1,85 @@
+// Injected into the in-app YouTube watch-page webview so it shows only the
+// video player filling the popup, with no YouTube chrome (masthead, sidebar,
+// comments). Stylesheet rules use `!important` so they override the inline
+// sizing YouTube's player JS continuously re-applies to the <video> element.
+;(function () {
+	const css = `
+		html, body {
+			margin: 0 !important;
+			overflow: hidden !important;
+			background: #000 !important;
+		}
+
+		/* Hide all YouTube chrome around the player. */
+		#masthead-container,
+		ytd-masthead,
+		#secondary,
+		#secondary-inner,
+		#below,
+		ytd-comments,
+		#comments,
+		#chat,
+		ytd-watch-metadata,
+		#related,
+		tp-yt-app-drawer {
+			display: none !important;
+		}
+
+		/* Expand the player to fill the webview (which is the popup area). */
+		ytd-watch-flexy #player,
+		#player-container,
+		#player-container-inner,
+		#movie_player,
+		.html5-video-player {
+			position: fixed !important;
+			inset: 0 !important;
+			width: 100vw !important;
+			height: 100vh !important;
+			max-width: none !important;
+			max-height: none !important;
+			margin: 0 !important;
+			padding: 0 !important;
+			z-index: 2147483646 !important;
+		}
+
+		video.html5-main-video {
+			position: fixed !important;
+			inset: 0 !important;
+			width: 100vw !important;
+			height: 100vh !important;
+			object-fit: contain !important;
+		}
+	`
+
+	function inject() {
+		if (document.getElementById('__mr_theater_style')) {
+			return
+		}
+		const style = document.createElement('style')
+		style.id = '__mr_theater_style'
+		style.textContent = css
+		;(document.head || document.documentElement).appendChild(style)
+	}
+
+	inject()
+	document.addEventListener('DOMContentLoaded', inject)
+
+	// YouTube lays out player controls on resize; nudge it after load so the
+	// control bar matches the resized player, and try to start playback.
+	function nudge() {
+		window.dispatchEvent(new Event('resize'))
+		const player = document.getElementById('movie_player')
+		if (player && typeof player.playVideo === 'function') {
+			try {
+				player.playVideo()
+			} catch (e) {
+				/* ignore */
+			}
+		}
+	}
+
+	window.addEventListener('load', function () {
+		setTimeout(nudge, 400)
+		setTimeout(nudge, 1200)
+	})
+})()

From 42a9391949916563ad7e42dcd2d4990cc6baeabb Mon Sep 17 00:00:00 2001
From: rejaad <rejaad95@gmail.com>
Date: Mon, 1 Jun 2026 12:40:02 -0500
Subject: [PATCH 4/4] Render YouTube embeds as click-to-play overlay in the app

Replace inline YouTube iframes in project descriptions with a thumbnail
facade; clicking it invokes the open_video_overlay command and shows a
dimmed backdrop with a close button. Esc or clicking the backdrop closes
the overlay and stops playback.

This is app-frontend only, so the shared @modrinth/ui description
component (used by the website, where inline iframes work) is unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/app-frontend/src/helpers/utils.js        |   8 +
 .../src/pages/project/Description.vue         | 220 +++++++++++++++++-
 2 files changed, 225 insertions(+), 3 deletions(-)

diff --git a/apps/app-frontend/src/helpers/utils.js b/apps/app-frontend/src/helpers/utils.js
index d0dd6797c0..89d23ac952 100644
--- a/apps/app-frontend/src/helpers/utils.js
+++ b/apps/app-frontend/src/helpers/utils.js
@@ -43,6 +43,14 @@ export async function highlightInFolder(path) {
 	return await invoke('plugin:utils|highlight_in_folder', { path })
 }
 
+export async function openVideoOverlay(videoId) {
+	return await invoke('plugin:utils|open_video_overlay', { videoId })
+}
+
+export async function closeVideoOverlay() {
+	return await invoke('plugin:utils|close_video_overlay')
+}
+
 export async function showLauncherLogsFolder() {
 	return await invoke('plugin:utils|show_launcher_logs_folder', {})
 }
diff --git a/apps/app-frontend/src/pages/project/Description.vue b/apps/app-frontend/src/pages/project/Description.vue
index 825b35d70a..c25c669b00 100644
--- a/apps/app-frontend/src/pages/project/Description.vue
+++ b/apps/app-frontend/src/pages/project/Description.vue
@@ -1,18 +1,126 @@
 <template>
 	<Card>
-		<ProjectPageDescription :description="project.body" />
+		<!-- eslint-disable-next-line vue/no-v-html -->
+		<div ref="container" class="markdown-body" @click="onClick" v-html="renderedBody" />
 	</Card>
+
+	<Teleport to="body">
+		<Transition name="video-overlay-fade">
+			<div
+				v-if="videoOpen"
+				class="video-overlay-backdrop"
+				@click="closeOverlay"
+				@keydown.esc="closeOverlay"
+			>
+				<!-- The native video webview is positioned by Rust centered in this
+				     backdrop. This region is just a sizing placeholder + close button. -->
+				<div class="video-overlay-frame" @click.stop>
+					<button
+						type="button"
+						class="video-overlay-close"
+						aria-label="Close video"
+						@click="closeOverlay"
+					>
+						<XIcon />
+					</button>
+				</div>
+			</div>
+		</Transition>
+	</Teleport>
 </template>
 
 <script setup>
-import { Card, ProjectPageDescription } from '@modrinth/ui'
+import { XIcon } from '@modrinth/assets'
+import { Card } from '@modrinth/ui'
+import { renderHighlightedString } from '@modrinth/utils'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+
+import { closeVideoOverlay, openVideoOverlay } from '@/helpers/utils.js'
 
-defineProps({
+const props = defineProps({
 	project: {
 		type: Object,
 		default: () => {},
 	},
 })
+
+const YOUTUBE_EMBED = /^https?:\/\/(?:www\.)?youtube(?:-nocookie)?\.com\/embed\/([a-zA-Z0-9_-]{11})/
+
+const videoOpen = ref(false)
+
+// Inline YouTube iframes fail with Error 153 in the app (the tauri:// webview
+// sends no Referer to the cross-origin frame). Swap each embed for a thumbnail
+// facade that opens the video as a centered in-app overlay webview.
+function facadeForIframe(iframe) {
+	const src = iframe.getAttribute('src') ?? ''
+	const match = src.match(YOUTUBE_EMBED)
+	if (!match) {
+		return null
+	}
+
+	const videoId = match[1]
+	const facade = document.createElement('button')
+	facade.type = 'button'
+	facade.className = 'video-facade'
+	facade.dataset.videoId = videoId
+	facade.setAttribute('aria-label', 'Play YouTube video')
+	facade.innerHTML =
+		`<img loading="lazy" alt="" src="https://i.ytimg.com/vi/${videoId}/hqdefault.jpg" />` +
+		`<span class="video-facade__play" aria-hidden="true"></span>`
+	return facade
+}
+
+const renderedBody = computed(() => {
+	const html = renderHighlightedString(props.project?.body ?? '')
+	if (typeof document === 'undefined') {
+		return html
+	}
+
+	const template = document.createElement('template')
+	template.innerHTML = html
+	for (const iframe of template.content.querySelectorAll('iframe')) {
+		const facade = facadeForIframe(iframe)
+		if (facade) {
+			iframe.replaceWith(facade)
+		}
+	}
+	return template.innerHTML
+})
+
+function onClick(event) {
+	const facade = event.target.closest('.video-facade')
+	if (!facade) {
+		return
+	}
+	event.preventDefault()
+	videoOpen.value = true
+	openVideoOverlay(facade.dataset.videoId)
+}
+
+function closeOverlay() {
+	videoOpen.value = false
+	closeVideoOverlay()
+}
+
+// Keep the native webview in sync if the overlay is dismissed by navigation, etc.
+watch(videoOpen, (open) => {
+	if (!open) {
+		closeVideoOverlay()
+	}
+})
+
+function onKeydown(event) {
+	if (event.key === 'Escape' && videoOpen.value) {
+		closeOverlay()
+	}
+}
+window.addEventListener('keydown', onKeydown)
+onBeforeUnmount(() => {
+	window.removeEventListener('keydown', onKeydown)
+	if (videoOpen.value) {
+		closeVideoOverlay()
+	}
+})
 </script>
 
 <script>
@@ -20,3 +128,109 @@ export default {
 	name: 'Description',
 }
 </script>
+
+<style scoped lang="scss">
+.markdown-body :deep(.video-facade) {
+	position: relative;
+	display: block;
+	width: 100%;
+	max-width: 560px;
+	aspect-ratio: 16 / 9;
+	padding: 0;
+	border: none;
+	border-radius: var(--radius-md);
+	overflow: hidden;
+	cursor: pointer;
+	background: var(--color-button-bg);
+
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+	}
+
+	.video-facade__play {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 68px;
+		height: 48px;
+		border-radius: 14px;
+		background: rgba(0, 0, 0, 0.7);
+		transition: background 0.15s ease-in-out;
+
+		&::after {
+			content: '';
+			position: absolute;
+			top: 50%;
+			left: 52%;
+			transform: translate(-50%, -50%);
+			border-style: solid;
+			border-width: 11px 0 11px 19px;
+			border-color: transparent transparent transparent #fff;
+		}
+	}
+
+	&:hover .video-facade__play,
+	&:focus-visible .video-facade__play {
+		background: var(--color-brand);
+	}
+}
+
+.video-overlay-backdrop {
+	position: fixed;
+	inset: 0;
+	z-index: 1000;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(0, 0, 0, 0.8);
+}
+
+// Matches the 80%/16:9 rect the Rust side uses for the native video webview,
+// so the close button sits just outside its top-right corner.
+.video-overlay-frame {
+	position: relative;
+	width: 80%;
+	aspect-ratio: 16 / 9;
+	max-height: 80%;
+}
+
+.video-overlay-close {
+	position: absolute;
+	top: -2.75rem;
+	right: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 2.25rem;
+	height: 2.25rem;
+	padding: 0;
+	border: none;
+	border-radius: var(--radius-md);
+	background: var(--color-button-bg);
+	color: var(--color-contrast);
+	cursor: pointer;
+
+	svg {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+
+	&:hover {
+		filter: brightness(1.25);
+	}
+}
+
+.video-overlay-fade-enter-active,
+.video-overlay-fade-leave-active {
+	transition: opacity 0.15s ease-in-out;
+}
+
+.video-overlay-fade-enter-from,
+.video-overlay-fade-leave-to {
+	opacity: 0;
+}
+</style>