<section id="bg_container">
  <div class="fade">
   <iframe id="bg" src="https://www.youtube.com/embed/ev9oPUNaqXE?loop=1&amp;autoplay=1&amp;disablekb=1&amp;controls=1&amp;showinfo=0&amp;rel=0&amp;wmode=transparent&amp;" frameborder="0"></iframe>
  </div>
 <div class="container ">
  <div class="row">
   <div class="col-xs-12 col-md-9">
    <h3 class="slogan">Lorem ipsum dolor sit amet, partem libris cotidieque id vel. In duo ferri aliquando, in aliquam epicuri sea. </h3>
   </div>
   <div class="col-xs-12 col-md-3"><a class="btn btn-default btn-lg">Call to action</a></div>
  </div>
 </div>
</section>&nbsp;

bg_container {
 margin: 80px 0 40px 0;
 height: 300px;
 overflow: hidden;
 position: relative;
 background: $opposite-color;
 padding: 100px 0;
}
 
#bg {
 width: 100%;
 height: 900px;
 position: absolute;
 top: -300px;
}
 
#content {
 position: absolute;
 top: 0px;
 padding: 30px;
}
 
.fade {
 opacity: 0.2;
}