diff --git a/src/big-picture/src/components/pages/game/screenshot-carousel/index.tsx b/src/big-picture/src/components/pages/game/screenshot-carousel/index.tsx
index 4b1f144f10..ae214bfef7 100644
--- a/src/big-picture/src/components/pages/game/screenshot-carousel/index.tsx
+++ b/src/big-picture/src/components/pages/game/screenshot-carousel/index.tsx
@@ -1,4 +1,4 @@
-import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
+import { CaretLeftIcon, CaretRightIcon, PlayIcon } from "@phosphor-icons/react";
 import type { SteamMovie, SteamScreenshot } from "@types";
 import useEmblaCarousel from "embla-carousel-react";
 import type { FocusOverrideTarget } from "../../../../services";
@@ -11,6 +11,7 @@ import {
   useState,
 } from "react";
 import { getItemFocusTarget } from "../../../../helpers";
+import { useUserPreferences } from "../../../../hooks";
 import { BIG_PICTURE_SIDEBAR_ITEM_IDS } from "../../../../layout";
 import { FocusItem, HorizontalFocusGroup } from "../../../common";
 import { useNavigationIsFocused, useNavigationStore } from "../../../../stores";
@@ -22,6 +23,8 @@ import {
 } from "../navigation";
 import { VideoPlayer } from "./video-player";
 
+const PLAY_ICON_SIZE = 28;
+
 interface ScreenshotCarouselProps {
   screenshots: SteamScreenshot[];
   videos: SteamMovie[];
@@ -44,9 +47,15 @@ interface ScreenshotCarouselSlideProps {
   item: MediaItem;
   index: number;
   isSelected: boolean;
+  autoplayEnabled: boolean;
+  preferencesLoaded: boolean;
+  started: boolean;
+  isPlaying: boolean;
   onFocused: (index: number) => void;
-  onSelectItem: (index: number) => void;
+  onSelectItem: (index: number, target: EventTarget | null) => void;
   setVideoRef: (index: number, element: HTMLVideoElement | null) => void;
+  onVideoPlay: (index: number) => void;
+  onVideoPause: (index: number) => void;
   leftNavigationTarget?: FocusOverrideTarget;
   downNavigationTarget?: FocusOverrideTarget;
   rightNavigationTarget?: FocusOverrideTarget;
@@ -56,9 +65,15 @@ function ScreenshotCarouselSlide({
   item,
   index,
   isSelected,
+  autoplayEnabled,
+  preferencesLoaded,
+  started,
+  isPlaying,
   onFocused,
   onSelectItem,
   setVideoRef,
+  onVideoPlay,
+  onVideoPause,
   leftNavigationTarget,
   downNavigationTarget,
   rightNavigationTarget,
@@ -89,28 +104,41 @@ function ScreenshotCarouselSlide({
         <button
           type="button"
           className="game-page__media-carousel-surface"
-          onClick={() => onSelectItem(index)}
+          onClick={(event) => onSelectItem(index, event.target)}
           aria-label={`Media item ${index + 1}`}
         >
           {item.type === "video" ? (
-            <VideoPlayer
-              videoSrc={item.videoSrc}
-              videoType={item.videoType}
-              poster={item.poster}
-              autoplay={isSelected}
-              muted
-              loop
-              controls
-              style={{
-                width: "100%",
-                borderRadius: 8,
-                objectFit: "cover",
-                aspectRatio: "16 / 9",
-              }}
-              videoRef={(element) => {
-                setVideoRef(index, element);
-              }}
-            />
+            <>
+              <VideoPlayer
+                videoSrc={item.videoSrc}
+                videoType={item.videoType}
+                poster={item.poster}
+                autoplay={autoplayEnabled ? isSelected : started}
+                load={autoplayEnabled || started}
+                muted
+                loop
+                controls={autoplayEnabled || started}
+                style={{
+                  width: "100%",
+                  borderRadius: 8,
+                  objectFit: "cover",
+                  aspectRatio: "16 / 9",
+                }}
+                videoRef={(element) => {
+                  setVideoRef(index, element);
+                }}
+                onPlay={() => onVideoPlay(index)}
+                onPause={() => onVideoPause(index)}
+              />
+
+              {preferencesLoaded && !autoplayEnabled && !isPlaying && (
+                <div className="game-page__media-carousel-play-overlay">
+                  <div className="game-page__media-carousel-play-icon">
+                    <PlayIcon size={PLAY_ICON_SIZE} weight="fill" />
+                  </div>
+                </div>
+              )}
+            </>
           ) : (
             <img
               src={item.src}
@@ -134,11 +162,18 @@ export function ScreenshotCarousel({
 }: Readonly<ScreenshotCarouselProps>) {
   const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false });
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [startedIndices, setStartedIndices] = useState<Set<number>>(new Set());
+  const [playingIndex, setPlayingIndex] = useState<number | null>(null);
   const carouselContainerRef = useRef<HTMLDivElement | null>(null);
   const videoRefs = useRef<Array<HTMLVideoElement | null>>([]);
   const isFocusDrivenScrollRef = useRef(false);
   const navigation = NavigationService.getInstance();
   const currentFocusId = useNavigationStore((state) => state.currentFocusId);
+  const userPreferences = useUserPreferences();
+  const preferencesLoaded = userPreferences != null;
+  const autoplayEnabled = preferencesLoaded
+    ? userPreferences.autoplayGameTrailers !== false
+    : false;
 
   const mediaItems: MediaItem[] = useMemo(() => {
     const items: MediaItem[] = [];
@@ -245,7 +280,7 @@ export function ScreenshotCarousel({
     videoRefs.current.forEach((video, videoIndex) => {
       if (!video) return;
 
-      if (videoIndex === index) {
+      if (videoIndex === index && autoplayEnabled) {
         video.play().catch(() => {});
       } else {
         video.pause();
@@ -263,6 +298,7 @@ export function ScreenshotCarousel({
 
     isFocusDrivenScrollRef.current = false;
   }, [
+    autoplayEnabled,
     currentFocusId,
     emblaApi,
     isFocusInsideCarousel,
@@ -286,6 +322,11 @@ export function ScreenshotCarousel({
     setSelectedIndex(0);
   }, [mediaItems.length, selectedIndex]);
 
+  useEffect(() => {
+    setStartedIndices(new Set());
+    setPlayingIndex(null);
+  }, [mediaItems]);
+
   useEffect(() => {
     if (!emblaApi || !currentFocusId) return;
 
@@ -318,12 +359,43 @@ export function ScreenshotCarousel({
   );
 
   const handleSelectItem = useCallback(
-    (index: number) => {
+    (index: number, target: EventTarget | null) => {
       emblaApi?.scrollTo(index);
+
+      if (autoplayEnabled || index !== selectedIndex) return;
+
+      const video = videoRefs.current[index];
+
+      if (!startedIndices.has(index)) {
+        setStartedIndices((prev) => {
+          const next = new Set(prev);
+          next.add(index);
+          return next;
+        });
+        video?.play().catch(() => {});
+        return;
+      }
+
+      if (target instanceof HTMLVideoElement) return;
+
+      if (video && !video.paused) {
+        video.pause();
+        return;
+      }
+
+      video?.play().catch(() => {});
     },
-    [emblaApi]
+    [autoplayEnabled, emblaApi, selectedIndex, startedIndices]
   );
 
+  const handleVideoPlay = useCallback((index: number) => {
+    setPlayingIndex(index);
+  }, []);
+
+  const handleVideoPause = useCallback((index: number) => {
+    setPlayingIndex((current) => (current === index ? null : current));
+  }, []);
+
   const setVideoRef = useCallback(
     (index: number, element: HTMLVideoElement | null) => {
       videoRefs.current[index] = element;
@@ -353,9 +425,15 @@ export function ScreenshotCarousel({
                 item={item}
                 index={index}
                 isSelected={index === selectedIndex}
+                autoplayEnabled={autoplayEnabled}
+                preferencesLoaded={preferencesLoaded}
+                started={startedIndices.has(index)}
+                isPlaying={playingIndex === index}
                 onFocused={handleSlideFocused}
                 onSelectItem={handleSelectItem}
                 setVideoRef={setVideoRef}
+                onVideoPlay={handleVideoPlay}
+                onVideoPause={handleVideoPause}
                 leftNavigationTarget={
                   index === 0
                     ? getItemFocusTarget(BIG_PICTURE_SIDEBAR_ITEM_IDS.home)
diff --git a/src/big-picture/src/components/pages/game/screenshot-carousel/video-player.tsx b/src/big-picture/src/components/pages/game/screenshot-carousel/video-player.tsx
index 021cc43a80..b650c9bf7f 100644
--- a/src/big-picture/src/components/pages/game/screenshot-carousel/video-player.tsx
+++ b/src/big-picture/src/components/pages/game/screenshot-carousel/video-player.tsx
@@ -6,11 +6,14 @@ interface VideoPlayerProps {
   videoType?: string;
   poster?: string;
   autoplay?: boolean;
+  load?: boolean;
   muted?: boolean;
   loop?: boolean;
   controls?: boolean;
   style?: React.CSSProperties;
   videoRef?: (el: HTMLVideoElement | null) => void;
+  onPlay?: () => void;
+  onPause?: () => void;
 }
 
 export function VideoPlayer({
@@ -18,11 +21,14 @@ export function VideoPlayer({
   videoType,
   poster,
   autoplay = false,
+  load = true,
   muted = true,
   loop = false,
   controls = true,
   style,
   videoRef,
+  onPlay,
+  onPause,
 }: Readonly<VideoPlayerProps>) {
   const internalRef = useRef<HTMLVideoElement>(null);
   const isHls = videoType === "application/x-mpegURL";
@@ -30,6 +36,7 @@ export function VideoPlayer({
   useHlsVideo(internalRef, {
     videoSrc,
     videoType,
+    load,
     autoplay,
     muted,
     loop,
@@ -50,8 +57,11 @@ export function VideoPlayer({
         loop={loop}
         muted={muted}
         autoPlay={autoplay}
+        preload={load ? "auto" : "none"}
         playsInline
         style={style}
+        onPlay={onPlay}
+        onPause={onPause}
       >
         <track kind="captions" />
       </video>
@@ -66,8 +76,11 @@ export function VideoPlayer({
       loop={loop}
       muted={muted}
       autoPlay={autoplay}
+      preload={load ? "auto" : "none"}
       playsInline
       style={style}
+      onPlay={onPlay}
+      onPause={onPause}
     >
       {videoSrc && <source src={videoSrc} type={videoType} />}
       <track kind="captions" />
diff --git a/src/big-picture/src/pages/game/game.scss b/src/big-picture/src/pages/game/game.scss
index 8dcfb6e793..1e7f4f6018 100644
--- a/src/big-picture/src/pages/game/game.scss
+++ b/src/big-picture/src/pages/game/game.scss
@@ -464,6 +464,7 @@
   }
 
   &__media-carousel-surface {
+    position: relative;
     width: 100%;
     max-width: 100%;
     box-sizing: border-box;
@@ -483,6 +484,26 @@
     }
   }
 
+  &__media-carousel-play-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  &__media-carousel-play-icon {
+    width: 64px;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+
   &__media-carousel-placeholder {
     width: 100%;
     aspect-ratio: 16 / 9;
diff --git a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
index f9da431d9b..6d892c2b68 100644
--- a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
+++ b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
@@ -57,6 +57,50 @@
     object-fit: cover;
   }
 
+  &__video-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__video-play-button {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.4);
+    }
+  }
+
+  &__video-play-icon {
+    background-color: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    width: 56px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    transition: transform 0.2s ease;
+
+    .gallery-slider__video-play-button:hover & {
+      transform: scale(1.1);
+    }
+  }
+
   &__preview {
     width: 100%;
     padding: globals.$spacing-unit 0;
diff --git a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.tsx b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.tsx
index 3710d29092..508ed43c48 100644
--- a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.tsx
+++ b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.tsx
@@ -201,6 +201,7 @@ export function GallerySlider() {
                   videoType={item.videoType}
                   poster={item.poster}
                   autoplay={autoplayEnabled && index === firstVideoIndex}
+                  loadOnDemand={!autoplayEnabled}
                   loop
                   muted
                   controls
diff --git a/src/renderer/src/pages/game-details/gallery-slider/video-player.tsx b/src/renderer/src/pages/game-details/gallery-slider/video-player.tsx
index 0de6dbac55..b1356fb232 100644
--- a/src/renderer/src/pages/game-details/gallery-slider/video-player.tsx
+++ b/src/renderer/src/pages/game-details/gallery-slider/video-player.tsx
@@ -1,6 +1,10 @@
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { PlayIcon } from "@primer/octicons-react";
 import { useHlsVideo } from "@shared";
 
+const PLAY_ICON_SIZE = 24;
+
 interface VideoPlayerProps {
   videoSrc?: string;
   videoType?: string;
@@ -11,6 +15,7 @@ interface VideoPlayerProps {
   controls?: boolean;
   tabIndex?: number;
   className?: string;
+  loadOnDemand?: boolean;
 }
 
 export function VideoPlayer({
@@ -23,36 +28,52 @@ export function VideoPlayer({
   controls = true,
   tabIndex = -1,
   className,
+  loadOnDemand = false,
 }: Readonly<VideoPlayerProps>) {
+  const { t } = useTranslation("game_details");
   const videoRef = useRef<HTMLVideoElement>(null);
   const isHls = videoType === "application/x-mpegURL";
 
+  const [started, setStarted] = useState(!loadOnDemand);
+
+  useEffect(() => {
+    setStarted(!loadOnDemand);
+  }, [loadOnDemand]);
+
   useHlsVideo(videoRef, {
     videoSrc,
     videoType,
-    autoplay,
+    load: started,
+    autoplay: autoplay || (loadOnDemand && started),
     muted,
     loop,
   });
 
-  if (isHls) {
-    return (
-      <video
-        ref={videoRef}
-        controls={controls}
-        className={className}
-        poster={poster}
-        loop={loop}
-        muted={muted}
-        autoPlay={autoplay}
-        tabIndex={tabIndex}
-      >
-        <track kind="captions" />
-      </video>
-    );
-  }
+  const handleManualStart = () => {
+    setStarted(true);
 
-  return (
+    if (!isHls) {
+      videoRef.current?.play().catch(() => {});
+    }
+  };
+
+  const showOverlay = loadOnDemand && !started;
+
+  const video = isHls ? (
+    <video
+      ref={videoRef}
+      controls={controls}
+      className={className}
+      poster={poster}
+      loop={loop}
+      muted={muted}
+      autoPlay={autoplay}
+      preload={started ? "auto" : "none"}
+      tabIndex={tabIndex}
+    >
+      <track kind="captions" />
+    </video>
+  ) : (
     <video
       ref={videoRef}
       controls={controls}
@@ -61,10 +82,30 @@ export function VideoPlayer({
       loop={loop}
       muted={muted}
       autoPlay={autoplay}
+      preload={started ? "auto" : "none"}
       tabIndex={tabIndex}
     >
       {videoSrc && <source src={videoSrc} type={videoType} />}
       <track kind="captions" />
     </video>
   );
+
+  return (
+    <div className="gallery-slider__video-wrapper">
+      {video}
+
+      {showOverlay && (
+        <button
+          type="button"
+          className="gallery-slider__video-play-button"
+          onClick={handleManualStart}
+          aria-label={t("play")}
+        >
+          <div className="gallery-slider__video-play-icon">
+            <PlayIcon size={PLAY_ICON_SIZE} />
+          </div>
+        </button>
+      )}
+    </div>
+  );
 }
diff --git a/src/shared/use-hls-video.ts b/src/shared/use-hls-video.ts
index 54fe2de990..873746e788 100644
--- a/src/shared/use-hls-video.ts
+++ b/src/shared/use-hls-video.ts
@@ -4,6 +4,7 @@ import Hls from "hls.js";
 interface UseHlsVideoOptions {
   videoSrc: string | undefined;
   videoType: string | undefined;
+  load?: boolean;
   autoplay?: boolean;
   muted?: boolean;
   loop?: boolean;
@@ -21,14 +22,21 @@ const defaultLogger: HlsVideoLogger = {
 
 export function useHlsVideo(
   videoRef: React.RefObject<HTMLVideoElement>,
-  { videoSrc, videoType, autoplay, muted, loop }: UseHlsVideoOptions,
+  {
+    videoSrc,
+    videoType,
+    load = true,
+    autoplay,
+    muted,
+    loop,
+  }: UseHlsVideoOptions,
   log: HlsVideoLogger = defaultLogger
 ) {
   const hlsRef = useRef<Hls | null>(null);
 
   useEffect(() => {
     const video = videoRef.current;
-    if (!video || !videoSrc) return;
+    if (!video || !videoSrc || !load) return;
 
     const isHls = videoType === "application/x-mpegURL";
 
@@ -94,7 +102,7 @@ export function useHlsVideo(
 
     log.warn("HLS playback is not supported in this browser");
     return undefined;
-  }, [videoRef, videoSrc, videoType, autoplay, muted, loop, log]);
+  }, [videoRef, videoSrc, videoType, load, autoplay, muted, loop, log]);
 
   useEffect(() => {
     const video = videoRef.current;