Search code examples
cssvideomobilebackground-image

How to stop background video from resizing on scroll on mobile?

The resizing of the background happens due to the popping in/out of the browser bar on the phone. How can I prevent this issue?

CSS

html {
  overflow: hidden;
  height: 100%;
}

body {
  font-family: "Roboto", sans-serif;
  height: 100vh;
  width: 100%;
  overflow: auto;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  min-height: 100%;
  z-index: -1;
  object-fit: cover;
}

I have tried messing with with width, height and position values to no success.

Solution

  • Fixed. Had to change video height to:

    height: 100vh