iframe不重新调整为移动垂直视图

我仍然是一个HTML5菜鸟，到目前为止我有点东西了，这是非常时髦。我在HTML5UP上发现了一个模板，我一直在修改这些模板，更改了CSS并取出了我不需要的部分，以及自己添加了一些内容。iframe不重新调整为移动垂直视图

现在，我想在一个画廊中展示一些我已经实现的图像。它在手机上的工作也很好。我想展示的另一件事是我的YouTube频道播放列表，使用iframe嵌入。在桌面上看起来很好，但是在移动设备上，当垂直浏览页面时会破坏网站。我想知道是否有办法强制iframe通过手机屏幕来调整大小，或者如果我必须用另一个方向进行调整？（就像在JavaScript中使用视频和音频库）。

来源

2014-09-13 OmniOwl

如果你可以给你的代码，这将是有益的，但我相信this是你想要实现的？

只要给你的iframe宽度的百分比，而不是一个像素数。不过，我建议你也改变高度，因为你可以看到它在某些宽度上看起来很滑稽。

<iframe width="100%" height="315" src="//www.youtube.com/embed/ep7W89I_V_g" frameborder="0"  allowfullscreen></iframe>

我还建议您阅读媒体查询的documentation。

来源

2014-09-13 19:54:01

我在此期间计算出来的。我使用了一些CSS技巧来使其工作。基本上你将iframe包装在一个类容器中，然后使用CSS在容器上施加高宽比。那么你只需确保你的新视频包装盒所在的容器是响应式的（通过告诉它宽度：100％;） – OmniOwl 2014-09-13 20:45:43

这也适用。很高兴你想出来了。 – 2014-09-13 20:48:55

虽然我会选择你的答案，因为它也是一个解决方案。欢迎来到Stackoverflow :) – OmniOwl 2014-09-13 22:25:17

iframe不重新调整为移动垂直视图

回答

相关问题