如何在屏幕中央制作一个约为该区域三分之一的模态？ Mediaquery还有可能吗？

Question

我有以下代码，它可以很好地将350px模态视频带到屏幕上，但我更喜欢它更大和居中。这是一个引导问题吗？另外，我更喜欢模态没有白色背景......有点卡住了。我也喜欢媒体查询这个属性几乎占据整个移动屏幕......

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>

Answer 1

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