iframe 溢出了它的容器-解网

问：

我正在尝试创建一个类似于 Wistia 的布局 https://home.wistia.com/live/events/pnd98h7ffa?utm_campaign=2023%20Webinar%20Series&utm_medium=email&_hsmi=265945727&_hsenc=p2ANqtz--pQsHAbm-wIrzjy0fSLCgy63Z71DSHLtAlykHKCOOrVLGZQBflaCGBpRg2kCj9P55DoC0YrSAsCMIkc_7qJ0XAVNkLhA&utm_content=265945727&utm_source=hs_email 您所要做的就是使用任何凭据订阅：

我正在为此使用 react 和 tailwind，但我遇到了一个问题，即 iframe 溢出了它的大屏幕容器。这是一个伪代码，重现了相同的错误

*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

main {
  height: 100vh;
}

header {
  height: 10vh;
  background: crimson;
}

.content {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  height: 90vh;
  width: 100%;
  padding: 10px;
}

.content iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
}

.content div {
  width: 500px;
  height: 100%;
  background: dodgerblue;
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <main>
    <header></header>
    <div class="content">
      <iframe title="test" src="https://www.youtube.com/embed/7PIji8OubXU?si=XmbTvMWI5rlwS1ix"></iframe>
      <div></div>
    </div>
  </main>

</body>

这是错误的图片：

我尝试为 iframe 设置 max-height： 100%，它停止了高度溢出，但即使我尝试设置 max-width：100%，宽度也会不断增加;例如，当我尝试设置固定的最大宽度：500px 时，宽度停止增加，但 iframe 不再响应，黑色块/线条开始出现在它的两侧。Idk是什么问题导致了这种行为，这很令人沮丧。任何帮助都是值得赞赏的。

ReactJS iframe 响应式设计 Tailwind-CSS 溢出

*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

main {
  height: 100vh;
}

header {
  height: 10vh;
  background: crimson;
}

.content {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  height: 90vh;
  width: 100%;
  padding: 10px;
}

.content iframe {
  height: 100%;
  aspect-ratio: 16/9;
  border: 0;
}

.content div {
  width: 500px;
  height: 100%;
  background: dodgerblue;
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <main>
    <header></header>
    <div class="content">
      <iframe title="test" src="https://www.youtube.com/embed/7PIji8OubXU?si=XmbTvMWI5rlwS1ix"></iframe>
      <div></div>
    </div>
  </main>

</body>

根据您的评论，我认为在较小的设备上存在这些问题时，是的，您需要考虑查询。和/或使用比较接下来的两个片段。@mediaflex-wrap: wrap;

我在接下来的每个代码片段中都添加了两件事：

每个和上的 flex 值diviframe
- 这将允许它们以不同的速度增长和收缩（您可能会发现这是有益的）
再加上元素的 a，这样就不会占用所有的屏幕空间min-widthdiviframe

第二个代码片段没有，当屏幕太小而无法并排显示两个元素时，代码段会溢出：flex-wrap: wrap;

*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

main {
  height: 100vh;
}

header {
  height: 10vh;
  background: crimson;
}

.content {
  display: flex;
  /*flex-wrap: wrap;*/
  gap: 10px;
  justify-content: center;
  align-items: center;
  height: 90vh;
  width: 100%;
  padding: 10px;
}

.content iframe {
  max-height: 100%;
  max-width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  flex: 2 1;
}

.content div {
  min-width: 250px;
  max-width: 500px;
  height: 100%;
  background: dodgerblue;
  flex: 1 2;
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <main>
    <header></header>
    <div class="content">
      <iframe title="test" src="https://www.youtube.com/embed/7PIji8OubXU?si=XmbTvMWI5rlwS1ix"></iframe>
      <div></div>
    </div>
  </main>

</body>

这有以上几点，当风格觉得别无选择时，就会包装起来：flex-wrap: wrap

*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

main {
  height: 100vh;
}

header {
  height: 10vh;
  background: crimson;
}

.content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  height: 90vh;
  width: 100%;
  padding: 10px;
}

.content iframe {
  max-height: 100%;
  max-width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  flex: 2 1;
}

.content div {
  min-width: 250px;
  max-width: 500px;
  height: 100%;
  background: dodgerblue;
  flex: 1 2;
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <main>
    <header></header>
    <div class="content">
      <iframe title="test" src="https://www.youtube.com/embed/7PIji8OubXU?si=XmbTvMWI5rlwS1ix"></iframe>
      <div></div>
    </div>
  </main>

</body>

也许也可以解决您的问题，因为它不会主动应用于屏幕的宽度，而是会在屏幕非常小时接管。max-width: 100%;iframe

我不会担心屏幕比 320px 窄，许多公司/开发人员/博客也这么说：

感谢您的快速回答！我使用了您的代码，它确实适用于较大的屏幕，但另一方面它不适用于较小的屏幕，因为 iframe 没有缩小并随着屏幕变小而保持其大小，所以我尝试添加 max-width：100%，它一开始有点工作，但对于一些较小的尺寸，侧边栏消失了，iframe 获得了容器的全宽和高度，然后我得到了那些”iframe 垂直侧的黑色“条。我应该只使用媒体查询并针对较小的屏幕进行处理，还是缺少某些内容？

0赞 Harrison 11/15/2023

我添加了更多讨论这个问题的片段（我认为）

上一个：没有源的 iframe 之间的同源策略 -- iframeception

下一个：如何仅使用客户端 JS 创建电报帖子小部件（在生成的 iframe 内）的屏幕截图？

iframe 溢出了它的容器

iframe overflowing it's container

评论

评论