html - 如何根据屏幕尺寸将背景图像更改为背景视频，可能使用 Bootstrap 4

Question

我的部分有背景图片，但当屏幕宽度超过 768 像素时，我需要将此图片更改为响应式背景视频。我知道我可以使用媒体查询来做到这一点，但是如何将背景图像更改为响应式背景视频？

我的代码如下:

  .welcome {
      height: 100vh;
      background: url("../images/welcome-bg.png") no-repeat center center;
      background-size: cover;
     }

<section class="d-flex welcome align-items-center">
        <div class="container-fluid">
            <h1 class="welcome-text">Welcome To Kramerica Industries</h1>
            <div class="explore-container">
                <a class="v-explore-button" href="#about">V</a>
                <p class="explore-text">Explore</p>
            </div>
        </div>
    </section>

Answer 1

假设您有 2 个 div，一个用于具有类 divImage 的图像，一个用于具有类 divVideo 的视频，然后执行如下操作:

@media (max-width: 768px)
        {
          .welcome {
             height: 100vh;
             background: url("../images/welcome-bg.png") no-repeat center center;
             background-size: cover;
     }
          video {
            display:none;
          }
        
        }
        @media (min-width: 769px) and (max-width : 1024px) {
            .welcome {
             height: 0vh;
             background: url("") no-repeat center center;
            
     }
           video {
              display:block;
            }
        }

<section class="d-flex welcome align-items-center">

 <!-- Video Tag Here -->
   <video id="bgVideo" autoplay loop poster="image.png">
      <!-- Video is embedded in the WEBM format -->
      <source src="video.webm" type="video/webm">
    </video>

        <div class="container-fluid">
            <h1 class="welcome-text">Welcome To Kramerica Industries</h1>
            <div class="explore-container">
                <a class="v-explore-button" href="#about">V</a>
                <p class="explore-text">Explore</p>
            </div>
        </div>
    </section>