CODEWITHSUNDEEP
javascripthtmlcss
yukashima huksay
yukashima huksay

Reputation: 6238

make a popup's height expand to the content of it's children

I want to embed a video from a website in a popup. I want the width of the video to be equal to 60% of the viewport and the height of it to be calculated automatically so as to preserve the aspect ratio. The problem is that the iframe changes width accordingly but I can't get the containing div to extend it's height so as to include the iframe wholly.

Here is my code:

#popup {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 20; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.85); /* Black w/ opacity */
    }
    
    #popup-content {
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        width: 60%;
        border-radius: 10px;
        position: relative;
    }
    
    .close {
        position: absolute;
        top: 0;
        right: 0;
        color: #ddd;
        font-size: 50pt;
        text-shadow: 0 0 3px black;
    }
    
    .close:hover, .close:focus {
        color: #fff;
    }
    
    iframe {
        border-radius: 10px;
        border:0;
        padding: 60px 0;
        width: 100%;
    }
<div id="popup" style="display: block;">
  <div id="popup-content">
    <iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" src="https://www.aparat.com/video/video/embed/videohash/5kInv/vt/frame" width="100%" height="100%"></iframe>   <button type="button" class="close"><strong>×</strong></button>
</div>
</div>

Upvotes: 0

Views: 837

Answers (1)

doğukan
doğukan

Reputation: 27421

You should use aspect ratio. Like this:

#popup {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 20; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.85); /* Black w/ opacity */
}

#popup-content {
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 60%;
  border-radius: 10px;
  position: relative;
}

.close {
  position: absolute;
  top: 0;
  right: 0;
  color: #ddd;
  font-size: 50pt;
  text-shadow: 0 0 3px black;
}

.close:hover, .close:focus {
  color: #fff;
}

.embed-container {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 56.27198%;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center center;
}

.embed-container iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: 10px;
 border:0;
 }
<div id="popup" style="display: block;">
  <div id="popup-content">
  <div class="embed-container">
    <iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" src="https://www.aparat.com/video/video/embed/videohash/5kInv/vt/frame" width="100%" height="100%"></iframe></div>   <button type="button" class="close"><strong>×</strong></button>
</div>
</div>

Upvotes: 3

Related Questions