经过研究，我发现this article 最终得到了下面的解决方案。

<div style="position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;">
    <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
        src="http://slither.io/" width="100%" height="100%" frameborder="0" 
        scrolling="no" seamless="seamless" allowfullscreen="allowfullscreen">
    </iframe>
</div>

此代码的作用是将div的宽度设置为100%，然后通过设置

padding-bottom: 56.25%;

将包装div的位置设置为相对，将iframe的位置设置为绝对，在这里也起着重要的作用。

现在，div始终响应父容器，并始终将分辨率保持在16:9。

您可以通过更改"padding-bottom: 56.25%" 达到您想要的比率（注意56.25/100 == 9/16).

如果你想让你的代码更漂亮，你可以向你的网站添加一个自定义的CST（通过改变主题的代码文件或添加一个自定义文本小部件），如下所示

.responsiveWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.responsiveWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="responsiveWrapper">
    <iframe src="http://slither.io/" frameborder="0" 
        scrolling="no" seamless="seamless" allowfullscreen="allowfullscreen">
    </iframe>
</div>

来源：
https://hexadix.com/tag/slither-io/