diff --git a/src/lib/apis/tmdb/tmdb-api.ts b/src/lib/apis/tmdb/tmdb-api.ts
index f721761..8f26041 100644
--- a/src/lib/apis/tmdb/tmdb-api.ts
+++ b/src/lib/apis/tmdb/tmdb-api.ts
@@ -305,6 +305,35 @@ export class TmdbApi implements Api<paths> {
 	getPersonBackdrops = async (person_id: number) =>
 		this.getPersonTaggedImages(person_id).then((r) => r.filter((i) => (i.aspect_ratio || 0) > 1.5));
 
+	getMovieVideos = async (tmdbId: number) => {
+		return this.getClient()
+			.GET('/3/movie/{movie_id}/videos', {
+				params: {
+					path: {
+						movie_id: tmdbId
+					},
+					query: {
+						language: get(settings)?.language || 'en',
+					}
+				}
+			})
+			.then((res) => res.data?.results || []);
+	};
+	getSeriesVideos = async (tmdbId: number) => {
+		return this.getClient()
+			?.GET('/3/tv/{series_id}/videos', {
+				params: {
+					path: {
+						series_id: tmdbId
+					},
+					query: {
+						language: get(settings)?.language || 'en',
+					}
+				}
+			})
+			.then((res) => res.data?.results || []);
+	};
+
 	// OTHER
 
 	// USER
diff --git a/src/lib/components/HeroCarousel/HeroBackground.svelte b/src/lib/components/HeroCarousel/HeroBackground.svelte
index 1a39ec4..758113f 100644
--- a/src/lib/components/HeroCarousel/HeroBackground.svelte
+++ b/src/lib/components/HeroCarousel/HeroBackground.svelte
@@ -3,6 +3,7 @@
 	import classNames from 'classnames';
 	import { onDestroy } from 'svelte';
 	import { isFirefox } from '../../utils/browser-detection';
+	import YouTubeBackground from '../YouTubeBackground.svelte';
 
 	export let urls: Promise<string[]>;
 	export let index: number;
@@ -36,45 +37,47 @@
 </script>
 
 <div class="fixed inset-0" style="-webkit-transform: translate3d(0,0,0);">
+	{#await urls then urlArray}
 	{#if !isFirefox()}
-		{#await urls then urls}
-			{#each urls as url, i}
-				<div
+		{#each urlArray as { trailerUrl, backdropUrl }, i}
+			{#if i === index}
+				{#if trailerUrl}
+					<YouTubeBackground videoId={trailerUrl} backgroundUrl={backdropUrl} />
+				{:else}
+					<div
+						class={classNames('absolute inset-0 bg-center bg-cover', {
+							'opacity-100': visibleIndex === i,
+							'opacity-0': visibleIndex !== i,
+							'scale-110': !hasFocus
+						})}
+						style={`background-image: url('${backdropUrl}'); transition: opacity 500ms, transform 500ms;`}
+					/>
+				{/if}
+			{/if}
+		{/each}
+	{:else}
+		<div class={classNames('flex overflow-hidden h-full w-full transition-transform duration-500', { 'scale-110': !hasFocus })}
+			 style="perspective: 1px; -webkit-perspective: 1px;">
+			{#each urlArray as { backdropUrl }, i}
+				<div class="w-full h-full flex-shrink-0 relative"
+					 style="transform-style: preserve-3d; -webkit-transform-style: preserve-3d; overflow: hidden;"
+					 bind:this={htmlElements[i]}>
+					<div 
 					class={classNames('absolute inset-0 bg-center bg-cover', {
 						'opacity-100': visibleIndex === i,
 						'opacity-0': visibleIndex !== i,
 						'scale-110': !hasFocus
 					})}
-					style={`background-image: url('${url}'); transition: opacity 500ms, transform 500ms;`}
-				/>
+					style={`background-image: url('${backdropUrl}'); ${
+							!PLATFORM_TV &&
+							'transform: translateZ(-5px) scale(6); -webkit-transform: translateZ(-5px) scale(6);'
+						 }`}
+					/>
+				</div>
 			{/each}
-		{/await}
-	{:else}
-		<div
-			class={classNames('flex overflow-hidden h-full w-full transition-transform duration-500', {
-				'scale-110': !hasFocus
-			})}
-			style="perspective: 1px; -webkit-perspective: 1px;"
-		>
-			{#await urls then urls}
-				{#each urls as url, i}
-					<div
-						class="w-full h-full flex-shrink-0 basis-auto relative"
-						style="transform-style: preserve-3d; -webkit-transform-style: preserve-3d; overflow: hidden;"
-						bind:this={htmlElements[i]}
-					>
-						<div
-							class="w-full h-full flex-shrink-0 basis-auto bg-center bg-cover absolute inset-0"
-							style={`background-image: url('${url}'); ${
-								!PLATFORM_TV &&
-								'transform: translateZ(-5px) scale(6); -webkit-transform: translateZ(-5px) scale(6);'
-							}`}
-						/>
-					</div>
-				{/each}
-			{/await}
 		</div>
 	{/if}
+{/await}
 </div>
 <div
 	class={classNames('absolute inset-0 flex flex-col transition-opacity', {
diff --git a/src/lib/components/HeroCarousel/HeroCarousel.svelte b/src/lib/components/HeroCarousel/HeroCarousel.svelte
index 86540c1..5762dd6 100644
--- a/src/lib/components/HeroCarousel/HeroCarousel.svelte
+++ b/src/lib/components/HeroCarousel/HeroCarousel.svelte
@@ -10,7 +10,7 @@
 
 	const dispatch = createEventDispatcher();
 
-	export let urls: Promise<string[]>;
+	export let urls: Promise<{ trailerUrl: string; backdropUrl: string }[]>;
 	export let index = 0;
 	export let hideInterface = false;
 
diff --git a/src/lib/components/HeroShowcase/HeroShowcase.svelte b/src/lib/components/HeroShowcase/HeroShowcase.svelte
index d486923..efe3f2a 100644
--- a/src/lib/components/HeroShowcase/HeroShowcase.svelte
+++ b/src/lib/components/HeroShowcase/HeroShowcase.svelte
@@ -35,7 +35,10 @@
 </script>
 
 <HeroCarousel
-	urls={items.then((items) => items.map((i) => `${TMDB_IMAGES_ORIGINAL}${i.backdropUri}`))}
+	urls={items.then((items) => items.map((i) => ({
+		backdropUrl: `${TMDB_IMAGES_ORIGINAL}${i.backdropUri}`,
+		trailerUrl: i.trailerUrl || ''
+	})))}
 	bind:index={showcaseIndex}
 	on:enter
 	on:navigate={({ detail }) => {
diff --git a/src/lib/components/HeroShowcase/TmdbMoviesHeroShowcase.svelte b/src/lib/components/HeroShowcase/TmdbMoviesHeroShowcase.svelte
index 190d2f0..2573b69 100644
--- a/src/lib/components/HeroShowcase/TmdbMoviesHeroShowcase.svelte
+++ b/src/lib/components/HeroShowcase/TmdbMoviesHeroShowcase.svelte
@@ -3,35 +3,48 @@
 	import { formatMinutesToTime, formatThousands } from '$lib/utils';
 	import { navigate } from '../StackRouter/StackRouter';
 	import HeroShowcase from './HeroShowcase.svelte';
+	import { tmdbApi } from '$lib/apis/tmdb/tmdb-api';
 
 	export let movies: Promise<TmdbMovie2[]>;
-	$: items = movies.then((movies) =>
-		movies.map((movie) => ({
-			id: movie.id ?? 0,
-			type: 'movie' as const,
-			posterUri: movie.poster_path ?? '',
-			backdropUri: movie.backdrop_path ?? '',
-			title: `${movie.title}`,
-			overview: movie.overview ?? '',
-			infoProperties: [
-				...(movie.release_date
-					? [{ label: new Date(movie.release_date).getFullYear().toString() }]
-					: []),
-				...(movie.runtime ? [{ label: formatMinutesToTime(movie.runtime) }] : []),
-				...(movie.vote_average
-					? [
-							{
-								label: `${movie.vote_average.toFixed(1)} TMDB (${formatThousands(
-									movie.vote_count ?? 0
-								)})`,
-								href: `https://www.themoviedb.org/movie/${movie.id}`
-							}
-					  ]
-					: []),
-				...(movie.genres ? [{ label: movie.genres.map((genre) => genre.name).join(', ') }] : [])
-			]
-		}))
-	);
+
+	$: items = movies.then(async (movies) => {
+		return Promise.all(
+			movies.map(async (movie) => {
+				const trailerUrl = movie.id
+					? await tmdbApi.getMovieVideos(movie.id).then((videos) =>
+							videos.find((video) => video.type === 'Trailer' && video.site === 'YouTube')?.key || ''
+					  )
+					: '';
+
+				return {
+					id: movie.id ?? 0,
+					type: 'movie' as const,
+					posterUri: movie.poster_path ?? '',
+					backdropUri: movie.backdrop_path ?? '',
+					title: movie.title ?? '',
+					overview: movie.overview ?? '',
+					trailerUrl: trailerUrl ?? '',
+					infoProperties: [
+						...(movie.release_date
+							? [{ label: new Date(movie.release_date).getFullYear().toString() }]
+							: []),
+						...(movie.runtime ? [{ label: formatMinutesToTime(movie.runtime) }] : []),
+						...(movie.vote_average
+							? [
+									{
+										label: `${movie.vote_average.toFixed(1)} TMDB (${formatThousands(
+											movie.vote_count ?? 0
+										)})`,
+										href: `https://www.themoviedb.org/movie/${movie.id}`
+									}
+							  ]
+							: []),
+						...(movie.genres ? [{ label: movie.genres.map((genre) => genre.name).join(', ') }] : [])
+					]
+				};
+			})
+		);
+	});
 </script>
 
 <HeroShowcase on:select={({ detail }) => navigate(`/movie/${detail?.id}`)} {items} />
diff --git a/src/lib/components/HeroShowcase/TmdbSeriesHeroShowcase.svelte b/src/lib/components/HeroShowcase/TmdbSeriesHeroShowcase.svelte
index 792692f..8a24cde 100644
--- a/src/lib/components/HeroShowcase/TmdbSeriesHeroShowcase.svelte
+++ b/src/lib/components/HeroShowcase/TmdbSeriesHeroShowcase.svelte
@@ -1,38 +1,51 @@
 <script lang="ts">
-	import type { TmdbMovie2, TmdbSeries2 } from '$lib/apis/tmdb/tmdb-api';
-	import { formatMinutesToTime, formatThousands } from '$lib/utils';
+	import type { TmdbSeries2 } from '$lib/apis/tmdb/tmdb-api';
+	import { formatThousands } from '$lib/utils';
 	import { navigate } from '../StackRouter/StackRouter';
 	import HeroShowcase from './HeroShowcase.svelte';
+	import { tmdbApi } from '$lib/apis/tmdb/tmdb-api';
 
 	export let series: Promise<TmdbSeries2[]>;
-	$: items = series.then((series) =>
-		series.map((series) => ({
-			id: series.id ?? 0,
-			type: 'movie' as const,
-			posterUri: series.poster_path ?? '',
-			backdropUri: series.backdrop_path ?? '',
-			title: `${series.name}`,
-			overview: series.overview ?? '',
-			infoProperties: [
-				...(series.status !== 'Ended'
-					? [{ label: `Since ${new Date(series.first_air_date ?? 0).getFullYear()}` }]
-					: series.last_air_date
-					? [{ label: `Ended ${new Date(series.last_air_date).getFullYear()}` }]
-					: []),
-				...(series.vote_average
-					? [
-							{
-								label: `${series.vote_average.toFixed(1)} TMDB (${formatThousands(
-									series.vote_count ?? 0
-								)})`,
-								href: `https://www.themoviedb.org/tv/${series.id}`
-							}
-					  ]
-					: []),
-				...(series.genres ? [{ label: series.genres.map((genre) => genre.name).join(', ') }] : [])
-			]
-		}))
-	);
+
+	$: items = series.then(async (series) => {
+		return Promise.all(
+			series.map(async (series) => {
+				const trailerUrl = series.id
+					? await tmdbApi.getSeriesVideos(series.id).then((videos) =>
+							videos.find((video) => video.type === 'Trailer' && video.site === 'YouTube')?.key || ''
+					  )
+					: '';
+
+				return {
+					id: series.id ?? 0,
+					type: 'series' as const,
+					posterUri: series.poster_path ?? '',
+					backdropUri: series.backdrop_path ?? '',
+					title: series.name ?? '',
+					overview: series.overview ?? '',
+					trailerUrl: trailerUrl ?? '',
+					infoProperties: [
+						...(series.status !== 'Ended'
+							? [{ label: `Since ${new Date(series.first_air_date ?? 0).getFullYear()}` }]
+							: series.last_air_date
+							? [{ label: `Ended ${new Date(series.last_air_date).getFullYear()}` }]
+							: []),
+						...(series.vote_average
+							? [
+									{
+										label: `${series.vote_average.toFixed(1)} TMDB (${formatThousands(
+											series.vote_count ?? 0
+										)})`,
+										href: `https://www.themoviedb.org/tv/${series.id}`
+									}
+							  ]
+							: []),
+						...(series.genres ? [{ label: series.genres.map((genre) => genre.name).join(', ') }] : [])
+					]
+				};
+			})
+		);
+	});
 </script>
 
 <HeroShowcase on:select={({ detail }) => navigate(`/series/${detail?.id}`)} {items} />
diff --git a/src/lib/components/YouTubeBackground.svelte b/src/lib/components/YouTubeBackground.svelte
new file mode 100644
index 0000000..2e7cb1d
--- /dev/null
+++ b/src/lib/components/YouTubeBackground.svelte
@@ -0,0 +1,225 @@
+<script lang="ts">
+    import { onMount, onDestroy } from 'svelte';
+    import { fade } from 'svelte/transition';
+    import { PLATFORM_WEB } from '../constants';
+
+    export let videoId: string | null = null;
+    export let backgroundUrl: string;
+
+    let player: any;
+    let showBackgroundImage = true;
+    let showBackgroundImageError = false;
+    let isDestroyed = false;
+    let isPlayerReady = false;
+    let lastRequestedVideoId: string | null = null; 
+    const stopBeforeEnd = 12;
+    let checkStopInterval: any = null;
+    let isLoadingPlayer = false;
+
+    function loadYouTubeAPI() {
+        if (!PLATFORM_WEB) return;
+
+        if (!window.YT) {
+            const tag = document.createElement('script');
+            tag.src = 'https://www.youtube.com/iframe_api';
+            document.head.appendChild(tag);
+            window.onYouTubeIframeAPIReady = () => {
+                setupPlayer();
+            };
+        } else {
+            setupPlayer();
+        }
+    }
+
+    function destroyPlayer() {
+        if (player) {
+            try {
+                player.destroy();
+            } catch (e) {
+                console.warn("Error destroying player.", e);
+            }
+            player = null;
+            isPlayerReady = false;
+            clearInterval(checkStopInterval);
+        }
+    }
+
+    function setupPlayer() {
+        if (!PLATFORM_WEB || !window.YT || isDestroyed || !videoId || isLoadingPlayer) return;
+    
+        isLoadingPlayer = true;
+        if (videoId === lastRequestedVideoId) {
+            isLoadingPlayer = false;
+            return;
+        }
+        
+        lastRequestedVideoId = videoId;
+        destroyPlayer();
+    
+        setTimeout(() => {
+            if (!window.YT || isDestroyed) {
+                isLoadingPlayer = false;
+                return;
+            }
+    
+            player = new window.YT.Player('youtube-player', {
+                videoId: videoId,
+                playerVars: {
+                    autoplay: 1,
+                    controls: 0,
+                    modestbranding: 1,
+                    rel: 0,
+                    iv_load_policy: 3,
+                    start: 3,
+                    fs: 0,
+                    disablekb: 1,
+                    cc_load_policy: 0,
+                    mute: 1
+                },
+                events: {
+                    onReady: () => {
+                        isLoadingPlayer = false;
+                        if (isDestroyed || videoId !== lastRequestedVideoId) {
+                            destroyPlayer();
+                            return;
+                        }
+                        isPlayerReady = true;
+                        setTimeout(() => player?.playVideo(), 1500);
+                    },
+                    onStateChange: handlePlayerStateChange,
+                    onError: handlePlayerError
+                }
+            });
+        }, 200);
+    }
+
+    function handlePlayerError(event: any) {
+        if (isDestroyed) return;
+
+        const errorMessages: Record<number, string> = {
+            2: "Invalid video ID.",
+            5: "Playback error.",
+            100: "Video not found.",
+            101: "Embedding restricted by the owner.",
+            150: "Embedding restricted by the owner."
+        };
+
+        console.warn("YouTube Player Error:", errorMessages[event.data] || "Unknown error.");
+        showBackgroundImageError = true;
+        showBackgroundImage = true;
+        destroyPlayer();
+    }
+
+    function handlePlayerStateChange(event: any) {
+        if (isDestroyed || !isPlayerReady) return;
+
+        if (event.data === YT.PlayerState.PLAYING) {
+            setTimeout(() => (showBackgroundImage = false), 1000);
+
+            if (checkStopInterval) {
+                clearInterval(checkStopInterval);
+            }
+
+            checkStopInterval = setInterval(() => {
+                if (!player || showBackgroundImageError || isDestroyed) {
+                    clearInterval(checkStopInterval);
+                    return;
+                }
+
+                const remainingTime = player.getDuration() - player.getCurrentTime();
+
+                if (remainingTime <= stopBeforeEnd) {
+                    try {
+                        player.pauseVideo();
+                        player.seekTo(0);
+                        player.playVideo();
+                    } catch (e) {
+                        console.warn("Error looping video.", e);
+                    }
+                }
+            }, 1000);
+        } else if (event.data === YT.PlayerState.ENDED) {
+            if (!isDestroyed) {
+                try {
+                    player.seekTo(0);
+                    player.playVideo();
+                } catch (e) {
+                    console.warn("Error restarting video.", e);
+                }
+            }
+        }
+    }
+
+    onMount(() => {
+        isDestroyed = false;
+        loadYouTubeAPI();
+    });
+
+    onDestroy(() => {
+        isDestroyed = true;
+        destroyPlayer();
+    });
+
+    $: if (videoId && window.YT && !isDestroyed) {
+        setupPlayer();
+    }
+</script>
+
+
+
+
+
+<div id="youtube-player" class="video-background"></div>
+
+{#if showBackgroundImage || showBackgroundImageError}
+    <div
+        class="background-image"
+        style={`background-image: url('${backgroundUrl}');`}
+        in:fade={{ duration: 200 }}
+        out:fade={{ duration: 400 }}
+    ></div>
+{/if}
+
+<style>
+    .video-background {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        width: 100vw;
+        height: 100vh;
+        transform: translate(-50%, -50%) scale(1.6);
+        transition: transform 0.5s ease-in-out;
+        z-index: 0;
+    }
+
+    @media (max-width: 1200px) {
+        .video-background {
+            transform: translate(-50%, -50%) scale(2);
+        }
+    }
+
+    @media (max-width: 800px) {
+        .video-background {
+            transform: translate(-50%, -50%) scale(2.5);
+        }
+    }
+
+    @media (max-width: 500px) {
+        .video-background {
+            transform: translate(-50%, -50%) scale(3);
+        }
+    }
+
+    .background-image {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        pointer-events: none;
+        z-index: 1;
+        background-size: cover;
+        background-position: center;
+        opacity: 1;
+    }
+</style>
diff --git a/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte b/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte
index d881297..e00b2ba 100644
--- a/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte
+++ b/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte
@@ -76,7 +76,7 @@
 					(movie) =>
 						movie?.images.backdrops
 							?.sort((a, b) => (b.vote_count || 0) - (a.vote_count || 0))
-							?.map((bd) => TMDB_IMAGES_ORIGINAL + bd.file_path || '')
+							?.map((bd) => ({backdropUrl: TMDB_IMAGES_ORIGINAL + bd.file_path || ''}))
 							.slice(0, 5) || []
 				)}
 			>
diff --git a/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte b/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte
index 02011f2..0559244 100644
--- a/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte
+++ b/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte
@@ -91,7 +91,7 @@
 					(series) =>
 						series?.images.backdrops
 							?.sort((a, b) => (b.vote_count || 0) - (a.vote_count || 0))
-							?.map((i) => TMDB_IMAGES_ORIGINAL + i.file_path)
+							?.map((bd) => ({backdropUrl: TMDB_IMAGES_ORIGINAL + bd.file_path || ''}))
 							.slice(0, 5) || []
 				)}
 			>