如何将视频定位在媒体查询中(iPhone)中

Question

我当前有一个带有此代码的YouTube视频。问题在于，左翼在页面右侧创建了一个65px的白色边框。我已经尝试将其设置为position:absolute。然后，我使用top: left: %调整位置，但这使整个页面在更改分辨率时稍有不同。

@media only screen and (min-device-width : 200px) and (max-device-width : 1099px) {
 .video {
    position    : static;
    width       : 100%;
    height      : auto;
    float       : none;
    margin-left : 65px;
}
}

Answer 1

如果您无法使用margin: 0 auto（我强烈建议您使用），则可以在left上的CSS中使用calc()函数，而使用position: relative将其居中。

喜欢：

.video{
    position: relative;
    top: 0px;
    left: calc(50% - 100px); // the negative amount MUST be half of the actual video element
    width: 200px; // in this example, it is 200px, so the negative value must be 100px
}

好事是，相对定位将使您的其余网站元素保持不变，而不会进行任何脱位。

希望这会有所帮助： - ）

Answer 2

这是我使用的，也是响应

的

/* Flexible iFrame */
.flexible-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" frameborder="0" style="border:0"></iframe>
</div>