Question

我尝试将iframe视频移到页面中心但不能正常工作，我该怎么做？

<div style="font-size: 1.3em;color:rgb(62, 67, 62);">               
    <div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
        <iframe src="https://www.youtube.com/embed/PRJxJdgc4Ng" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute;top: 0;left: 0;width: 80%;height: 80%;"></iframe>
    </div>
</div>

Answer 1

如果您要继续使用内联样式执行此操作，请输入您需要的代码：

HTML

<div style="font-size: 1.3em;color:rgb(62, 67, 62); width:500px; margin:0 auto;">
    <div style="position: relative; height: 0; padding-top: 56.25%;">
          <iframe src="https://www.youtube.com/embed/PRJxJdgc4Ng" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute;top: 0;left: 0;height:100%;width:100%;"></iframe>
    </div>
</div>

我强烈建议您不要像现在这样使用内联样式。我建议改为使用样式表：

CSS

.videoWrapper{
    position:relative;
    padding-top:56:25%;
    max-width:800px;
    margin:0 auto;
}

.videoWrapper iframe{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    height:100%;
    width:100%;
}

如果div占据了容器的整个宽度，则width无法正确居中，这就是为什么您需要首先在其上声明max-width或margin:0 auto;的原因然后利用[byte1, byte2, byte3]声明将其水平居中。

如果您需要垂直居中，请更新您的问题，我会更新我的答案。

Answer 2

你的iframe的样式设置为absoulute和top：0。如果你想动态放置它，你就不应该这样做。

https://jsfiddle.net/egjw5p3b/3/

  <iframe src="https://www.youtube.com/embed/PRJxJdgc4Ng" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="">
  </iframe>

这是你想要的吗？

如何将iframe视频移动到页面中心？

2 个答案:

HTML

CSS