When viewing my webpage on mobile, the video background does not fit the screen properly (it fits in landscape orientation).
Here is the video tag I am using:
<video
autoPlay
loop
muted
playsInline
className='absolute w-full h-full top-0 left-0 object-cover z-0 overflow-hidden'
>
Below is the global CSS being applied:
@tailwind base;
@tailwind components;
@tailwind utilities;
html {
margin: 0;
height: 100%;
width: 100%;
}
body {
min-height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: SF Pro Display, SF Pro Icons, Helvetica, Neue, Helvetica, Arial, sans-serif;
line-height: 1.1;
letter-spacing: 0.1em;
}
This is my first post so please let me know if anything needs to be added or adjusted.