有没有办法让 iframe 嵌入响应更快？答案

【问题标题】：Is there a way to make iframe embeds more responsive?有没有办法让 iframe 嵌入响应更快？
【发布时间】：2021-08-12 21:21:06
【问题描述】：

所以我对前端开发有点陌生，我自己通过反复试验来学习它，但我最近似乎陷入了死胡同。我试图并排放置两个谷歌嵌入（谷歌地图和表单），但这只会导致两者之间的纵横比尴尬。我的问题是如何对齐嵌入在容器中的两个 iframe（谷歌地图和表单），以便它们在桌面上并在移动设备上垂直显示时并排显示，同时保持舒适的纵横比（响应宽度和高度）给用户？

这是我目前所拥有的：

这是我想要的外观： Contact Page with Contact Form and Google Maps embed side-by-side on desktop and vertically aligned on mobile

【问题讨论】：

标签： javascript html css iframe responsive

【解决方案1】：

您需要使用“css 媒体查询”来根据屏幕大小重新定位 html 页面中的项目。

我在这里做了一个例子，请随意复制粘贴这段代码到你的项目中:)。

我可以看到您是这里的新开发人员，我希望您下次注意，如果您可以复制代码并将其粘贴到 stackoverflow 中而不是截屏，这将使人们的工作更轻松。

（当您按下展开 sn-p 并调整大小以适合浏览器大小时，下面的 sn-p 效果更好）

<style>
    .container{
        display: flex;   /*Set div as flexbox to override default margins*/
    }
    iframe{/*Perform to all iframes*/
        width: 50%;
        margin: 10px;
    }
    @media only screen and (max-width: 900px) {/*When screen size is below 900px*/
        .container{/*Make the form and map stack over each other*/
            flex-direction: column;
            /*flex-direction: column-reverse;*//* If you want them to stack the other way around*/ 
        }
        iframe{
            width: 100%;/*Make iframes take up entire screen since they are no longer next to each other*/
        }
    }
</style>
<div class="container">
    <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSciufqdxJmnuDrbnCQywya61Tbf5sdf0RXKvbu4rNi7_Dba7gyjQ/viewform?embedded=true" id = "form" width="640" height="1427" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
    <iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>

【讨论】：

谢谢你，尽管谷歌表单仍然给我带来麻烦 g-maps 工作得很好！再次感谢您花时间解释每一行代码（：
没问题，很高兴能帮上忙 :)

【解决方案2】：

要使嵌入的内容具有响应性，您需要在 iframe 周围添加一个包含包装器。您的标记如下：

<div>
<iframe src="blablabla.com" height="315" width="560" allowfullscreen="" frameborder="0">
</iframe>

CSS

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;

}

此 CSS 的说明

将位置设置为相对位置让我们可以对 iframe 本身使用绝对定位，我们稍后会介绍。
将位置设置为相对位置让我们可以对 iframe 本身使用绝对定位，我们稍后会介绍。
padding-top 值设置为 30 像素，以便为 chrome 留出空间——这是特定于 YouTube 视频的。
高度设置为 0，因为 padding-bottom 为元素提供了所需的高度。我们不设置宽度，因为它会随着包含此 div 的响应式元素自动调整大小。
将溢出设置为隐藏可确保在此元素之外突出的任何内容都将从视图中隐藏。

在这一切之后，你可以只处理你的 iframe

.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;

}

【讨论】：