Twitter bootstrap 我如何在屏幕中央制作一个大约三分之一区域的模式？Mediaquery也可以吗？

我有下面的代码，它可以很好地将一个350px的模式视频带到屏幕上，但我更喜欢它更大、更居中。这是一个引导问题吗？另外，我更喜欢的是模态没有白色背景。。。有点卡住了。我还想mediaquery这个属性占据几乎整个手机屏幕

HTML-

<a href=""
   data-toggle="modal"
   data-target="#videoModal"
   data-theVideo="http://www.youtube.com/embed/loFtozxZG0s">
   <div class="trailer_button">
       <i class="fa fa-play"></i>  Watch Trailer
   </div>
</a>

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <div>
          <iframe width="100%" height="350"  src="https://www.youtube.com/embed/tBYm53L79YY"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

&时代；

---

创建并链接到JSFIDLE对您很有用，这样我们就可以轻松地使用您的代码了！

iframe{  
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}