diff --git a/front/packages/ui/src/player/index.tsx b/front/packages/ui/src/player/index.tsx
index bd496e29..df35889f 100644
--- a/front/packages/ui/src/player/index.tsx
+++ b/front/packages/ui/src/player/index.tsx
@@ -39,7 +39,6 @@ import { episodeDisplayNumber } from "../details/episode";
 import { ErrorView } from "../errors";
 import { Back, Hover, LoadingIndicator } from "./components/hover";
 import { useVideoKeyboard } from "./keyboard";
-import { MediaSessionManager } from "./media-session";
 import { Video, durationAtom, fullscreenAtom } from "./state";
 import { WatchStatusObserver } from "./watch-status-observer";
 
@@ -90,6 +89,15 @@ export const Player = ({
 		data && data.type === "episode" && data.nextEpisode
 			? `/watch/${data.nextEpisode.slug}?t=0`
 			: undefined;
+	const title =
+		data &&
+		(data.type === "movie"
+			? data.name
+			: `${data.show!.name} ${episodeDisplayNumber({
+					seasonNumber: data.seasonNumber,
+					episodeNumber: data.episodeNumber,
+					absoluteNumber: data.absoluteNumber,
+				})}`);
 
 	useVideoKeyboard(info?.subtitles, info?.fonts, previous, next);
 
@@ -119,26 +127,7 @@ export const Player = ({
 
 	return (
 		<>
-			{data && (
-				<Head
-					title={
-						data.type === "movie"
-							? data.name
-							: `${data.show!.name} ${episodeDisplayNumber({
-									seasonNumber: data.seasonNumber,
-									episodeNumber: data.episodeNumber,
-									absoluteNumber: data.absoluteNumber,
-								})}`
-					}
-					description={data.overview}
-				/>
-			)}
-			<MediaSessionManager
-				title={data?.name ?? t("show.episodeNoMetadata")}
-				image={data?.thumbnail?.high}
-				next={next}
-				previous={previous}
-			/>
+			<Head title={title} description={data?.overview} />
 			{data && info && (
 				<WatchStatusObserver type={type} slug={data.slug} duration={info.durationSeconds} />
 			)}
@@ -150,6 +139,13 @@ export const Player = ({
 				})}
 			>
 				<Video
+					metadata={{
+						title: title ?? t("show.episodeNoMetadata"),
+						description: data?.overview ?? undefined,
+						imageUri: data?.thumbnail?.high,
+						next: next,
+						previous: previous,
+					}}
 					links={data?.links}
 					audios={info?.audios}
 					subtitles={info?.subtitles}
diff --git a/front/packages/ui/src/player/state.tsx b/front/packages/ui/src/player/state.tsx
index 0c7f388a..90d3e361 100644
--- a/front/packages/ui/src/player/state.tsx
+++ b/front/packages/ui/src/player/state.tsx
@@ -104,6 +104,7 @@ export const Video = memo(function Video({
 	setError,
 	fonts,
 	startTime: startTimeP,
+	metadata,
 	...props
 }: {
 	links?: Episode["links"];
@@ -113,6 +114,13 @@ export const Video = memo(function Video({
 	setError: (error: string | undefined) => void;
 	fonts?: string[];
 	startTime?: number | null;
+	metadata: {
+		title?: string;
+		description?: string;
+		imageUri?: string;
+		previous?: string;
+		next?: string;
+	};
 } & Partial<VideoProps>) {
 	const ref = useRef<ElementRef<typeof NativeVideo> | null>(null);
 	const [isPlaying, setPlay] = useAtom(playAtom);
@@ -220,8 +228,12 @@ export const Video = memo(function Video({
 			source={{
 				uri: source,
 				startPosition: startTime.current ? startTime.current * 1000 : undefined,
+				metadata: metadata,
 				...links,
 			}}
+			showNotificationControls
+			playInBackground
+			playWhenInactive
 			paused={!isPlaying}
 			muted={isMuted}
 			volume={volume}
diff --git a/front/packages/ui/src/player/video.tsx b/front/packages/ui/src/player/video.tsx
index 40d7ffe7..2d9ec583 100644
--- a/front/packages/ui/src/player/video.tsx
+++ b/front/packages/ui/src/player/video.tsx
@@ -19,6 +19,7 @@
  */
 
 import "react-native-video";
+import type { ReactVideoSourceProperties } from "react-native-video";
 
 declare module "react-native-video" {
 	interface ReactVideoProps {
@@ -27,7 +28,7 @@ declare module "react-native-video" {
 		onMediaUnsupported?: () => void;
 	}
 	export type VideoProps = Omit<ReactVideoProps, "source"> & {
-		source: { uri: string; hls: string | null; startPosition?: number };
+		source: ReactVideoSourceProperties & { hls: string | null };
 	};
 }
 
@@ -120,7 +121,7 @@ const Video = forwardRef<VideoRef, VideoProps>(function Video(
 								type: SelectedTrackType.INDEX,
 								value: subtitles?.indexOf(subtitle),
 							}
-						: { type: SelectedTrackType.DISABLED }
+						: { type: SelectedTrackType.DISABLED, value: "" }
 				}
 				{...props}
 			/>
diff --git a/front/packages/ui/src/player/video.web.tsx b/front/packages/ui/src/player/video.web.tsx
index 66f6f877..b0229475 100644
--- a/front/packages/ui/src/player/video.web.tsx
+++ b/front/packages/ui/src/player/video.web.tsx
@@ -38,6 +38,7 @@ import toVttBlob from "srt-webvtt";
 import { useForceRerender, useYoshiki } from "yoshiki";
 import { useDisplayName } from "../utils";
 import { PlayMode, audioAtom, playAtom, playModeAtom, progressAtom, subtitleAtom } from "./state";
+import { MediaSessionManager } from "./media-session";
 
 let hls: Hls | null = null;
 
@@ -208,46 +209,49 @@ const Video = forwardRef<{ seek: (value: number) => void }, VideoProps>(function
 	const setProgress = useSetAtom(progressAtom);
 
 	return (
-		<video
-			ref={ref}
-			src={source.uri}
-			muted={muted}
-			autoPlay={!paused}
-			controls={false}
-			playsInline
-			onCanPlay={() => onBuffer?.call(null, { isBuffering: false })}
-			onWaiting={() => onBuffer?.call(null, { isBuffering: true })}
-			onDurationChange={() => {
-				if (!ref.current) return;
-				onLoad?.call(null, { duration: ref.current.duration } as any);
-			}}
-			onTimeUpdate={() => {
-				if (!ref.current) return;
-				onProgress?.call(null, {
-					currentTime: ref.current.currentTime,
-					playableDuration: ref.current.buffered.length
-						? ref.current.buffered.end(ref.current.buffered.length - 1)
-						: 0,
-					seekableDuration: 0,
-				});
-			}}
-			onError={() => {
-				if (ref?.current?.error?.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED)
-					onMediaUnsupported?.call(undefined);
-				else {
-					onError?.call(null, {
-						error: { errorString: ref.current?.error?.message ?? "Unknown error" },
+		<>
+			<MediaSessionManager {...source.metadata} />
+			<video
+				ref={ref}
+				src={source.uri}
+				muted={muted}
+				autoPlay={!paused}
+				controls={false}
+				playsInline
+				onCanPlay={() => onBuffer?.call(null, { isBuffering: false })}
+				onWaiting={() => onBuffer?.call(null, { isBuffering: true })}
+				onDurationChange={() => {
+					if (!ref.current) return;
+					onLoad?.call(null, { duration: ref.current.duration } as any);
+				}}
+				onTimeUpdate={() => {
+					if (!ref.current) return;
+					onProgress?.call(null, {
+						currentTime: ref.current.currentTime,
+						playableDuration: ref.current.buffered.length
+							? ref.current.buffered.end(ref.current.buffered.length - 1)
+							: 0,
+						seekableDuration: 0,
 					});
-				}
-			}}
-			onLoadedMetadata={() => {
-				if (source.startPosition) setProgress(source.startPosition / 1000);
-			}}
-			onPlay={() => onPlaybackStateChanged?.({ isPlaying: true })}
-			onPause={() => onPlaybackStateChanged?.({ isPlaying: false })}
-			onEnded={onEnd}
-			{...css({ width: "100%", height: "100%", objectFit: "contain" })}
-		/>
+				}}
+				onError={() => {
+					if (ref?.current?.error?.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED)
+						onMediaUnsupported?.call(undefined);
+					else {
+						onError?.call(null, {
+							error: { errorString: ref.current?.error?.message ?? "Unknown error" },
+						});
+					}
+				}}
+				onLoadedMetadata={() => {
+					if (source.startPosition) setProgress(source.startPosition / 1000);
+				}}
+				onPlay={() => onPlaybackStateChanged?.({ isPlaying: true })}
+				onPause={() => onPlaybackStateChanged?.({ isPlaying: false })}
+				onEnded={onEnd}
+				{...css({ width: "100%", height: "100%", objectFit: "contain" })}
+			/>
+		</>
 	);
 });
 
