I think this is the best solution at the moment. I’ve added a button (labeled “spatial”) over these that triggers fullscreen. If you’re using an Apple Vision Pro, putting these in fullscreen will allow you to see the 3D versions. Everyone else will get 2D versions.

<div class="media-container alignwide">
  <div class="video-container">
    <video controls playsinline="true" poster="https://exp.michaelverdi.com/styles/spatial-poster.jpg">
      <source src="https://exp.michaelverdi.com/styles/spatial.mov">
      <source src="https://exp.michaelverdi.com/styles/spatial.mp4" type="video/mp4">
    </video>
    <button class="fullscreen-button" onclick="goFullscreen(this)"><img src="https://blog.michaelverdi.com/media/apple-vision-pro-icon.svg"/></button>
  </div>
</div>

<div class="media-container alignwide">
  <picture>
    <source srcset="https://exp.michaelverdi.com/styles/spatial.heic" type="image/heic">
    <img class="photo" src="https://exp.michaelverdi.com/styles/spatial.jpg" alt="your alt text">
    <button class="fullscreen-button" onclick="goFullscreen(this)"><img src="https://blog.michaelverdi.com/media/apple-vision-pro-icon.svg"/></button>
  </picture>
</div>

<script>
  function goFullscreen(button) {
    const media=button.previousElementSibling;
    if (media.requestFullscreen) {
      media.requestFullscreen();
      }
    }
</script>