Javascript 针对移动应用的响应式iFrame内容

我的iframe在手机和网站上都已经响应了，但我的问题是内容本身总是从iframe的宽度和高度溢出（溢出X和Y）

这是真实情况-移动视图（我使用谷歌浏览器模拟Galaxy Note 3、Pixel、Nexus 7等的显示）

以及它的外观-web视图

如您所见，内容已溢出。我是安卓工程师，所以我不是网络前端专家

这就是我所做的。我有两种可能的解决方案使iFrame具有响应性

第一个，用这种方式包装

<style>
    .responsive-video {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 60px; overflow: hidden;
    }

    .responsive-video iframe,
    .responsive-video object,
    .responsive-video embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    iframe {
        width:400px;
        height:600px;
        overflow-x:hidden;
        overflow-y:hidden;
    }
</style>

<div class="responsive-video">
    <iframe src="http://localhost/html/media/html_games/test_games"></iframe>
</div>

我已经检查了代码问题出在iframe的标签上你可以添加

溢出：隐藏

，或者你可以对缩放做些什么。

你可以提供一个片段或现场演示吗？添加了片段，请使用移动视图运行，你会看到内容比iframe本身溢出，在没有响应的内容上是否存在问题？

<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="http://localhost/html/media/html_games/test_games"></iframe>
</div>