how to make the background cover in mobile mode-CodePudding

here the background video is covering the entire screen but as I resize it to mobile view it leaves the black area at the bottom, how to deal with it I want the background video to be consistent in any screen width.

HTML and JS part:

import './App.css';
import Footer from './Components/Footer';
import Header from './Components/Header';
function App() {
  // let imageArr = ["back.jpg", "front.jpg", "right.jpg"];
  // let randomNum = Math.floor(Math.random() * imageArr.length);
  // let randomImage = imageArr[randomNum];
  return (
    // <div className="App" style={{backgroundImage: `url(${randomImage})`}}>

    
      <div className='overlay'>
      <video  src="back.mp4" autoplay="autoplay"loop muted></video>

        <div className='container'>
          <Header />
          <Footer />
        </div>
        </div>
   
    // </div>

  );
}

export default App;

css part

.App
{
  background-size:cover;
  height: 100vh;
  width:100vw;
  overflow: hidden;
  background:  no-repeat center center fixed;
  
}
.container
{
  padding: 3%;
  margin: 0px;
  
}
.overlay
{
position: absolute;
width:  100vw;
height:100vh;
background: rgb(0, 0, 0);
mix-blend-mode: overlay;
}
video
{
  position: absolute;
  width:  100vw;
  height:1fr;
 overflow: hidden;
opacity: 0.8;
}

CodePudding user response：

video {
  width: 100%;
  height: auto;
}

for further information please check W3 article: https://www.w3schools.com/css/css_rwd_videos.asp

CodePudding user response：

For a full-screen video on desktop and mobile you should start with a parent with a max-height: 100vh;.

Side note: background-blend-mode only works when there is a background: url('') and a background-color. It won't work with the img element.

With that being said, make the full-screen overlay with a pseudo-element. In your case, I used overlay:after to create the overlay. Then, most importantly for your video to stay full screen on desktop and mobile you need to have a min-width and min-height on the video itself. In this instance, I gave the video an ID called #video-position to get those styles.

I also added a sample overlay text. See the snippet below:

body {
  margin: 0;
}

.overlay {
  position: relative;
  max-height: 100vh;
  overflow: hidden;
}

.overlay:after {
  content: "";
  background: rgb(0, 0, 0, .5);
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

#video-position {
  min-width: 100%;
  min-height: 100vh;
  z-index: 0;
}

.overlay-txt {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 100%;
}

.overlay-txt>h1 {
  color: white;
  text-align: center;
}

<div >
  <div >
    <h1>Overlay Text</h1>
  </div>
  <video src="https://www.w3schools.com/howto/rain.mp4" id="video-position" autoplay="autoplay" loop muted></video>
  <div ></div>
</div>