Html 正确使用视频作为背景

将文本放置在视频(或IMG)上.您可以将文本和视频包装在一个div中(您已经这样做了).将div设置为position: relative;，并将文本定位为position: absolute;.这样，内容保留在页面流中，同时允许您随心所欲地放置文本！

.homeImage{
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    /* added code */
    position: relative;
}
   
.home-content{
    height: 100vh;
    width: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    /* added code */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.home-content h1{
    font-size: 90px !important;
    color: #fff !important;
    z-index: 10;
}

.home-content h2{
    font-size: 40px !important;
    color: #fff !important;
    z-index: 10;
}

.homeImage img,video{
    opacity: 0.5;
    height: 100vh;
    z-index: 0;
    width: 100%;
    object-fit: cover;
    /* remove position: absolute; from here*/
}

@media (max-width: 767px){
    .home-content h1{
        font-size: 60px !important;
    }

    .home-content h2{
        font-size: 35px !important;
    }
}

@media (max-width: 497px){
    .home-content h1{
        font-size: 30px !important;
    }

    .home-content h2{
        font-size: 20px !important;
    }
}

<div className='homeImage'>
   <video loop autoPlay muted>
      <source src={video} type="video/mp4"/>
   </video>
   <div className='home-content'>
      <h1 className='mb-4'>My Name</h1>
      <h2>This is a blog</h2>
   </div>
</div>