I want to use a video as a background instead of an image that automatically stretches to the whole screen (background).
I would also like to rotate videos and images.. so that there is a random video/image displayed in any order.
It would also be nice to know how to delay video playback, so that the video only plays once 30 seconds after the site loaded.
thx!
Tailwind CSS (on React.js/JSX)
If you are using Tailwind CSS, you must set the width, and height to screen size, then set object-fit to cover:
<video autoPlay muted loop id="myVideo" src="/video_bg.mp4" itemType="video/mp4" className='w-screen h-screen object-cover'>
Plain CSS
... or you can just apply this CSS to your video element:
#myVideo {
width: 100vw;
height: 100vw;
object-fit: cover;
}