How to load a different video for Dark Mode

Question

I want to load a different video based on the light/dark mode?

I searched around, but only found how to do it for images.

    <picture>
      <source 
        srcset="settings-dark.png"
        media="(prefers-color-scheme: dark)"
      />
      <source
        srcset="settings-light.png"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
      />
      <img src="settings-light.png" id="screenshot" loading="lazy" />
    </picture>

I tried to apply the same logic for the video tag, but it doesn't seem to work.

Answer 1

It's really unfortunate that media isn't supported on source elements inside of a video elements. This kind of leaves us needing to use multiple video tags (or javascript) like this:

<style>
  .dark-video {
    display: none;
  }

  @media (prefers-color-scheme: dark) {
    .dark-video {
      display: block;
    }

    .light-video {
      display: none;
    }
  }
</style>

<video class="light-video" src="/light.mp4" />
<video class="dark-video" src="/dark.mp4" />