如何使背景圖像與YouTube視頻溢出

Question

我有一個YouTube視頻在一個HTML部分是響應。 當我調整瀏覽器的大小時，youtube視頻會溢出到第二部分。

如何使第一部分的背景圖像與YouTube視頻一起擴展？

我需要保持這種HTML部分中時，它在橫向模式下的移動或者我需要的背景圖像拉伸以適應它。

HTML

#work { 
 
    text-align: center; 
 
    background: #3B3B3B url('https://bingo.jpg') no-repeat center center; 
 
    background-size: cover; 
 
    color: #ffffff; 
 
    height: 100vh; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    background-overflow: visible; 
 
} 
 

 
#work h3 { 
 
    margin-top: 0px; 
 
    font-size: 18px; 
 
}

<!-- work section --> 
 
<section id="work"> 
 

 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12 col-sm-12"> 
 
     <!-- \t <div class="section-title"> --> 
 
     <h1> <strong>Sample of Our Work</strong> </h1> 
 
     <hr></hr> 
 
     <!-- \t </div> --> 
 
     </div> 
 

 
    </div> 
 
    <div class="row"> 
 
     <div class="col-md-12 "> 
 
     <div class="video-container"> 
 
      <div class="video-wrapper"> 
 
      <iframe src="https://www.youtube.com/embed/qDgWfVqG_3E" frameborder="0" allowfullscreen></iframe> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</section>

Answer 1

不用擔心所有。

我只是去掉了CSS與

#work { 
 
text-align: center; 
 
    background: #3B3B3B url('https:screaming buzzrd.jpg') no-repeat center center; 
 
    background-size: cover; 
 
    color: #ffffff; 
 
    height: 100vh; 
 

 

 
} 
 

 

 
.video-wrapper {position: relative; 
 
\t \t \t \t \t \t \t padding-bottom: 56.25%; /* 16:9 */ 
 
\t \t \t \t \t \t \t padding-top: 25px; 
 
\t \t \t \t \t \t \t margin: auto;} 
 
.video-wrapper iframe {position: absolute; 
 
\t \t \t \t \t \t \t  \t \t top: 20%; 
 
\t \t \t \t \t \t \t \t \t left: 25%; 
 
\t \t \t \t \t \t \t \t \t width: 100%; 
 
\t \t \t \t \t \t \t \t \t height: 100%; 
 
} 
 
.container {width: 100%; margin: auto; }