# Mux Player examples
Browse our collection of code examples for building common use cases with Mux Player
<GuideCard
  imageSrc="/docs/images/example-player-loop@2x.png"
  imageWidth={536}
  imageHeight={300}
  title="Looping background video"
  description="Display a looping background video on your site with the Mux Player."
  links={[
    {
      title: "View on CodeSandbox →",
      href: "https://codesandbox.io/s/looping-hero-background-video-op53sr",
    },
  ]}
/>

<GuideCard
  imageSrc="/docs/images/example-player-ambient-mode@2x.png"
  imageWidth={536}
  imageHeight={300}
  title="Ambient mode"
  description="Create a dynamic background gradient that matches colors from the video."
  links={[
    {
      title: "View on CodeSandbox →",
      href: "https://codesandbox.io/s/ambient-mode-vv63e9",
    },
  ]}
/>

<GuideCard
  imageSrc="/docs/images/example-player-audio-viz@2x.png"
  imageWidth={536}
  imageHeight={300}
  title="Audio visualization with audio parameter"
  description="Display a visual representation of the audio in your video during playback."
  links={[
    {
      title: "View on CodeSandbox →",
      href: "https://codesandbox.io/s/audio-visualization-o52wog",
    },
  ]}
/>

<GuideCard
  imageSrc="/docs/images/example-player-metadata@2x.png"
  imageWidth={536}
  imageHeight={300}
  title="Sending detailed metadata to Mux Data"
  description="Display a visual representation of the audio in your video during playback."
  links={[
    {
      title: "View on CodeSandbox →",
      href: "https://codesandbox.io/s/send-detailed-metadata-wm6o44",
    },
  ]}
/>

<GuideCard
  imageSrc="/docs/images/example-player-disable-seek@2x.png"
  imageWidth={536}
  imageHeight={300}
  title="Disable seeking"
  description="Prevent you viewers from seeking to a specific point in the video."
  links={[
    {
      title: "View on CodeSandbox →",
      href: "https://codesandbox.io/s/disable-seeking-w7pltk",
    },
  ]}
/>

<GuideCard
  imageSrc="/docs/images/example-player-playlist@2x.png"
  imageWidth={536}
  imageHeight={300}
  title="Play videos in a playlist"
  description="Play through a set of audio or video sources."
  links={[
    {
      title: "View on CodeSandbox →",
      href: "https://codesandbox.io/s/mux-player-media-playlist-ntj11i",
    },
  ]}
/>

<GuideCard
  imageSrc="/docs/images/example-player-loop@2x.png"
  imageWidth={536}
  imageHeight={300}
  title="Mux Player Meditate (Audio Only + CuePoints)"
  description="Use Mux Player + CuePoints for advanced customization of playback and interactivity."
  links={[
    {
      title: "View on CodeSandbox →",
      href: "https://codesandbox.io/p/sandbox/mux-player-audio-cuepoints-vl2r9b",
    },
  ]}
/>