iframe包含在具有媒体查询的响应div标签中

Question

我使用iframe在我的网站中嵌入了一个自适应HTML页面，我设计了嵌入的HTML页面，因此我可以控制它。

问题在于嵌入式内容在PC上横向更宽，在移动设备上垂直更长。我最初在iframe上有一个固定的宽度/高度，所以它不起作用，内容在某些屏幕上被截断。

我所做的是将iframe包裹在div周围，希望我可以在div上使用媒体查询来调整它的大小并使iframe跨越div的宽度和高度。我不确定我的想法是否有意义，但它也不起作用。这是当前代码：http://jsfiddle.net/ujyraw5p/7/

<div class="resp-container" style="@media screen and (max-width: 600px) {
  .resp-container {
    width:100%;
    height:600px;
  }
}">
<iframe width="100%" height="100%" 
src="https://iframe.osazeosoba.com/2/2.html" allowfullscreen="" frameborder="0" scrolling="no"></iframe> 
</div>

我怎样才能让它发挥作用？

PS：我给其他博主提供了嵌入脚本，大多数人都无法在自己的主题中添加自定义CSS，因此我需要一个同时具有iframe和css的代码，以方便使用。