如何使用youtube视频使背景图像溢出

Question

我在一个HTML部分中有一个YouTube视频，它具有响应性。 当我调整浏览器大小时，youtube视频会溢出到第二个下一部分。

如何使用youtube视频扩展第一部分的背景图片？

我需要将其保留在此HTML部分中，当它在横向模式下移动时，或者我需要拉伸背景图像以适应它。

HTML

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

  <div class="container">
    <div class="row">
      <div class="col-md-12 col-sm-12">
        <!--	<div class="section-title"> -->
        <h1> <strong>Sample of Our Work</strong> </h1>
        <hr></hr>
        <!--	</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>

＆＃13;

＆＃13;

＆＃13;

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; 
							  padding-bottom: 56.25%; /* 16:9 */  
							  padding-top: 25px; 
							  margin: auto;}
.video-wrapper iframe {position: absolute; 
							   		  top: 20%; 
									  left: 25%; 
									  width: 100%; 
									  height: 100%;
}
.container {width: 100%;  margin: auto; }