灯箱位置不会停留在固定位置div内

Question

我松散地遵循了w3学校提供的用于模式灯箱的基本CSS灯箱模板。我还没有使用Javascript，只是布置了灯箱的外观和样式。

我有一个固定位置的div元素，用作灰色背景，在其中的“ lightbox-content” div内用于保存Vimeo链接的iframe。我遵循了一种变通方法，通过将iframe包含在另一个div中并调整样式来使其响应。我希望我的iframe的最大宽度为1280像素，但在较小的任何物体上，最大宽度为100％。

所有内容在较小的屏幕上都可以正常运行，iframe和包含的链接可以填充宽度，保持垂直居中并随页面缩放。但是，当我超过1280时，iframe会以各种奇怪的方式移动。我想拥有它，所以当页面宽度大约为1280左右时，iframe会以固定大小停留在屏幕中央，宽度为1280px。

我尝试使用@media查询来更改某些CSS规则，但是经过数小时的尝试，我在位置上迷失了。我认为让我感到困惑的是，如此之多的div彼此之间具有不同的定位类型，并且也不清楚如何正确地清除媒体查询中的CSS规则。

是否有明显的我做错了可以解决的问题？很难在很小的结果窗口中看到效果，因此，如果有办法在浏览器中将其全屏显示，希望您能看到我在说什么。

.lightbox {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  overflow: auto;
  padding-top: 0px;
  z-index: 1;
  background: rgba(0, 0, 0, .85);
  width: 100%;
  height: 100%;
}

.lightbox-content {
  position: absolute;
  width: 100%;
  height: auto;
  max-width: 1280px;
  max-height: 720px;
  top: 45%;
  left: 50%;
  right: 50%;
  margin-top: -25%;
  margin-left: -50%;
}

.responsive-container {
  position: relative;
  overflow: hidden;
  padding-bottom: 56.25%;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media only screen and (min-width: 1299px) {
  .lightbox {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    padding-top: auto;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
  .lightbox-content {
    position: relative;
    width: 1280px;
    height: 720px;
    max-width: none;
    max-height: none;
    top: 0;
    left: 0;
    right: 0;
    margin-top: auto;
    margin-left: auto;
  }
  .responsive-container {
    position: relative;
    overflow: hidden;
    padding-bottom: 56.25%;
  }
  .responsive-iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

<div id="myLightbox" class="lightbox">
  <div class="lightbox-content">
    <div class="responsive-container">
      <iframe class="responsive-iframe" id="lightbox-window" name="lightbox-window" src="https://player.vimeo.com/video/261201719" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </div>
  </div>
</div>