full page background video

[Leviathan91]

I want to use next-video (using mux as provider) to have a video background on my landing page, but there are certain width/height constellations where this does not seem to work (my best guess right now is that the video wants to stay in a 16:9 aspect ratio?) for next-video, while it does work for the native video implementation.

This is my code

export default function Home() {
  return (
    <>
      <div className={styles.container}>
        <div className={styles.video}>
          <Video
            src={BackgroundVideo}
            autoPlay
            loop
            muted
            playsInline
            controls={false}
          />
          {/* <video
            playsInline
            autoPlay
            muted
            loop
            poster="/images/background-water.png"
            id="bgvid"
            className={styles.video}
          >
            <source src="videos/landing-page.mp4" type="video/mp4" />
          </video> */}
        </div>
      </div>
    </>
  );
}

with these styles

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* padding-bottom: 120px; */
}

.video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

And here are images to illustrate the problem.
I also removed the video div and applied the style directly to the Video component, same result.

Edit: I've just seen that you guys added BackgroundVideo to your documentation and that works, amazing!
If you don't mind tho I'd still know how I would fix this without using the BackgroundVideo component so I learn something

[luwes]

is the issue here that the {styles.video} are not on the next-video Video component?

yes, by default next-video does put an aspect-ratio of 16 / 9 because 80% chance it would need it.
it's easily turned off by overriding the CSS, set to aspect-ratio: none

related:
#177
#131
#108