如何使用 CSS 创建响应式 iframe-之路教程

←如何仅使用 HTML 和 CSS 为 HTML5 <select> 框创建占位符？

创建 HTML

转到 Youtube，点击视频下方的“分享”按钮，然后“嵌入”它以复制 HTML 代码中的链接。

<iframe width="560" height="315" src="https://www.baidu.com" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

删除自动定义的尺寸，因为我们将要更改它们。
将 iframe 放在 <div> 元素中，这对于调整 iframe 的大小很重要。

给它添加一个类属性。

将 class、src、gesture 和 allow 属性与 <iframe> 元素一起使用。

<div class="wrap-element">
  <iframe class="wrapped-iframe" src="https://www.baidu.com" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>
</div>

如何使用 CSS 创建响应式 iframe

创建 iframe

HTML <iframe> 标签创建一个内嵌框架，用于嵌入第三方内容（媒体、小程序等）。

在此代码中，我们可以学习如何使用 CSS 创建响应式 iframe。

首先，让我们看看一个简单的 iframe 是什么样子，然后，我们将展示如何使它具有响应性。

创建一个简单的 <iframe> 标签的例子：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <iframe src="https://www.onitroad.com"></iframe>
  </body>
</html>

默认情况下，它的大小为 300x150 像素。
这就是为什么我们经常使用 width 和 height 属性来设置 iframe 的不同大小。

接下来，我们将使用 CSS 使 iframe 具有响应性。
让我们在 Youtube 上试试我们的例子。
以下是要遵循的步骤。

使用 CSS 框架

一些 CSS 框架具有与上述完全相同的预定义类，但在每种情况下，我们都需要创建一个包装元素来为其指定某个类。

带有 Bootstrap 的响应式 iframe

在 Bootstrap 3.2 及更高版本中，我们应该使用预定义的类“embed-responsive”和纵横比类修饰符，如“embed-responsive-16by9”，这将根据给定的修饰符类添加具有不同百分比的 padding-top。
然后，为 iframe 提供“嵌入响应项”类。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.baidu.com/" allowfullscreen></iframe>
</div>

但是我们也可以创建自己的修饰符类，如下所示：

.embed-responsive-10by3 {
  padding-top: 30%;
}

使用 CSS Bootstrap 框架创建响应式 iframe 的示例：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <title>文档的标题</title>
  </head>
  <body>
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="https://www.baidu.com/" allowfullscreen></iframe>
    </div>
  </body>
</html>

带有 Materialise 的响应式 iframe

使用 Materialize CSS 框架，我们需要做的就是将“video-container”类添加到包装器中：

<div class="video-container">
  <iframe src="//www.baidu.com" frameborder="0" allowfullscreen></iframe>
</div>

使用 CSS Materialize 框架创建响应式 iframe 的示例：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <title>文档的标题</title>
  </head>
  <body>
    <div class="video-container">
      <iframe src="//www.baidu.com" frameborder="0" allowfullscreen></iframe>
    </div>
  </body>
</html>

添加 CSS

通过将 position 属性设置为“relative”，将溢出设置为“hidden”并指定 padding-top 属性来设置“wrap-element”类的样式。

在我们的示例中，我们希望保持 56.26%（高度 9 ÷ 宽度 16）的比例，因为这是 YouTube 视频的默认比例。但是，我们也可以自由使用其他比率。

通过将“wrapped-iframe”类的位置指定为“absolute”并将 top 和 left 属性设置为 0 以将 iframe 定位在容器的中心，为“wrapped-iframe”类设置样式。

还将宽度和高度属性设置为“100%”并添加边框。

.wrap-element {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}
.wrapped-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

创建响应式 iframe 的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .wrap-element {
        position: relative;
        overflow: hidden;
        padding-top: 56.25%;
      }
      .wrapped-iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
      }
    </style>
  </head>
  <body>
    <div class="wrap-element">
      <iframe class="wrapped-iframe" src="https://www.baidu.com" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
    </div>
  </body>
</html>

日期：2020-06-02 22:15:02 来源：oir作者：oir