Question

我想要<iframe>响应。它用于显示YouTube视频。这就是我到目前为止所做的：

＆＃13;

<div class="wrapper">
  <h1>Scale Me - Responsive Video</h1>
  <div class="container">
    <iframe src="https://www.youtube.com/embed/sCO3jaVInnA?autoplay=1&controls=1&loop=1&mute=1" allowfullscreen=""></iframe>
  </div>
</div>

＆＃13;

这是一个Fiddle。

如何使<iframe>响应？

Answer 1

围绕iframe代码创建一个容器div，并为其提供一个类，例如：

＆＃13;

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

＆＃13;

<div class="wrapper">
  <h1>Scale Me - Responsive Video</h1>
  <div class="video-container">
    <iframe src="https://www.youtube.com/embed/sCO3jaVInnA?autoplay=1&controls=1&loop=1&mute=1" allowfullscreen=""></iframe>
  </div>

</div>

＆＃13;

来源：https://coolestguidesontheplanet.com/videodrome/youtube/

如何使iframe响应？

1 个答案: