Javascript 对于移动设备，iframe需要最小化

我目前正在建设一个网站，当你点击地图上的pin时，会弹出一个信息窗口，其中包含一个使用iframe嵌入的视频。 我的问题是，这些视频在桌面上看起来很棒，但一旦我尝试在手机上打开页面，iframe就太大了，无法为手机调整大小，信息窗口本身也可以调整大小，在手机上看起来不错

我尝试过改变iframe的css，但是每次我把它缩小到手机上，它在桌面上也会变小

当我打开手机上的信息窗口时，手机转向侧面，显示也正常。仅当屏幕很小时，iframe的大小就无法正确调整

---

非常感谢您的帮助。

您需要在css中使用

@media

来定义要应用特定css规则的屏幕大小

例如：

@media (max-width: 600px) {
 iframe {
   width: 50vw;
 }
}

---

我想这是这篇文章的翻版，我在上面的链接上尝试了一些css更改，但是当我单独在iframes中进行更改时，它可以工作，但是如果我将iframes放在一个信息窗口中，什么都不会显示！！！你可以在www.georound.com上看到我的意思，底部的视频在一个iframe中，每个设备都会调整大小，但信息窗口中的视频使用相同的代码，显示为空白？？？看起来像是位置：绝对；正在给信息窗口带来麻烦。只是显示为空白。