バックグラウンド画像をバックグラウンドビデオに変更するには、ブートストラップ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>

Answer 1

は、あなたが2つのdivを、クラスdivImageとビデオは、以下のような何かをよりクラスdivVideoを持つための1つを有する画像のための1つを持っていると仮定しましょう：

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