如何在屏幕中央大约三分之一的区域制作模态框？媒体查询也可以吗？

Question

我有以下代码，它适用于将 350 像素模态视频显示到屏幕上，但我更希望它更大并居中。这是 bootstrap 问题吗？另外，我更喜欢模态没有白色背景......有点卡住了。我还想对此属性进行媒体查询，以占据几乎整个移动屏幕...

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

如何在屏幕中央大约三分之一的区域制作模态框？媒体查询也可以吗？

How do I make a modal in the center of the screen about a third of the area? Mediaquery also possible?

twitter-bootstrap

video

media-queries

bootstrap-modal