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

Question

我的部分中有背景图片，但是当屏幕宽度超过768px时，我需要将此图像更改为自适应背景视频。我知道我可以使用媒体查询，但如何将bg图像更改为响应bg视频？

我的代码如下：

  .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>