填满 div 的响应式 iframe

Question

所以就像标题所说的那样，我正在尝试拥有一个响应迅速并填充 space 的 iframe，这甚至可能吗？我对此有点疯狂，我会 post 我所拥有的似乎只是 semi-responsive。 iframe html 标签中的宽度和高度没有明显区别：

.nav {
  width: 80%;
  border: 5px solid;
  margin-top: 35%;
  margin-left: 10%;
  padding-left: 2%;
}
.links {
  padding-left: 15%;
  padding-top: 5%;
}
.col-md-8 {
  border: 5px solid;
}
.col-md-4 {
  border: 5px solid;
}
.video-container iframe {
  position: absolute;
  margin-top: 10%;
  left: 0;
  width: 100%;
  height: 50%;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 35px;
  height: 0;
  overflow: hidden;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<html>

<body>
  <div class="container">

    <div class="row one">
      <div class="col-md-4">
        <div class="nav">
          <h1> Test nav </h1>
          <div class="links">
            <p><a href=""> Test </a>
            </p>
            <p><a href=""> Test </a>
            </p>
            <p><a href=""> Test </a>
            </p>
            <p><a href=""> Test </a>
            </p>
            <p><a href=""> Test </a>
            </p>
            <p><a href=""> Test </a>
            </p>
            <p><a href=""> Test </a>
            </p>
            <p><a href=""> Test </a>
            </p>
          </div>
          <!-- links -->
        </div>
        <!-- nav -->
      </div>

      <div class="col-md-8">
        <div class="video-container">
          <iframe width="100" height="100" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/282HjNJYhpE">
        </div>
      </div>
    </div>
    <!-- row -->


  </div>
  <!-- container -->
</body>

</html>

Answer 1

只需将 iframe 的 width 和 height 设置为 100% 即可匹配容器的尺寸。 width 和 height.

最好使用 CSS 而不是使用 HTML 属性

.nav {
  width: 80%;
  border: 5px solid;
  margin-top: 35%;
  margin-left: 10%;
  padding-left: 2%;
}
.links {
  padding-left: 15%;
  padding-top: 5%;
}
.col-md-8 {
  border: 5px solid;
}
.col-md-4 {
  border: 5px solid;
}
.video-container iframe {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-container {
  height: 100%;
  position: relative;
  padding-bottom: 56.25%;
}

<div class="container">

  <div class="row one">
    <div class="col-md-4">
      <div class="nav">
        <h1> Test nav </h1>
        <div class="links">
          <p><a href=""> Test </a>
          </p>
          <p><a href=""> Test </a>
          </p>
          <p><a href=""> Test </a>
          </p>
          <p><a href=""> Test </a>
          </p>
          <p><a href=""> Test </a>
          </p>
          <p><a href=""> Test </a>
          </p>
          <p><a href=""> Test </a>
          </p>
          <p><a href=""> Test </a>
          </p>
        </div>
        <!-- links -->
      </div>
      <!-- nav -->
    </div>

    <div class="col-md-8">
      <div class="video-container">
        <iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/282HjNJYhpE"></iframe>
      </div>
    </div>
  </div>
  <!-- row -->

  <div>
    <div class="col-md-12">
      test
      
    </div>
  </div>
  <!-- row -->


</div>
<!-- container -->

填满 div 的响应式 iframe

Responsive iframe that fills up a div

html

css

responsive