CODEWITHSUNDEEP
htmlcssresponsive
Sergi
Sergi

Reputation: 1240

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>

Upvotes: 1

Views: 64

Answers (1)

andreas
andreas

Reputation: 16936

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

Upvotes: 1

Related Questions