使弹出窗口的高度扩展到其子弹出窗口的内容

Question

我想在弹出窗口中嵌入网站的视频。我希望视频的宽度等于视口的60％及其高度，以自动计算以保持纵横比。问题在于iframe会相应地更改宽度，但我无法将contingdiv延长为延长其高度，以便将iframe完全包括在内。

。

这是我的代码：

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

Answer 1

您应该使用长宽比。这样：

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