Sergi Sergi - 2 months ago 6
CSS Question

Responsive iframe that fills up a div

So like the title says, I'm trying to have an iframe that is responsive and fills up a space, is this even possible? I'm going a bit nuts with this, I'll post what I have that it only seems to be semi-responsive. The width and height in the iframe html tag make no apparent difference:



.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

Just set the width and height of the iframe to 100% to match the dimensions of the container. It's better to use CSS rather than using the HTML attributes for width and height.

.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 -->