难以处理的 iframe 嵌入 - 不能很好地播放

Question

我已经尝试了所有我能想到的属性和属性组合，以便将此 iframe 嵌入到 WordPress 帖子中，以便所有内容在移动设备和大屏幕上都可见。看来我需要指定一个高度才能显示整个框架，但这样做会停止在移动设备上显示的所有宽度。

非常感谢任何帮助。

<div markdown="0" id="island">
  <iframe style="width: 100%; border: none" scrolling="no" src="http://devonmathstuition.co.uk/dev/treasure-island/"></iframe>
</div>

Answer 1

您需要在另一个元素中创建您的 iframe（其位置为 relative），并将您的 iframe 放置在 absolute 位置：

padding-top: 56.25% 对于保持 iframe 的比例 (16:9) 很有用。

Working JSfiddle（尝试调整显示标签的大小:)）。

HTML：

<section>
    <article id="iframe">
        <iframe src="src.html"></iframe>
    </article>
</section>

CSS：

section{
    max-width: 800px;
}

#iframe{
    width: 100%;
    max-width: 800px;
    position: relative;
    padding-top: 56.25%;
}

iframe{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    margin: auto;
    display: block;
    position: absolute;
}

src：smashingmagazine.com

编辑：here's a video 可调整大小的 iframe :)

edit2：哎呀，忘了section标签