网格中 iframe 的响应性有问题答案

【问题标题】：having trouble with the responsiveness of the iframe in a grid网格中 iframe 的响应性有问题
【发布时间】：2021-03-30 17:09:55
【问题描述】：

我正在尝试将 iframe 放入网格中，但不知何故它在浮动。有没有办法解决响应问题？

HTML

 <div class="box3">
                <div class="wrapper_frame">
                    <iframe class="wrapper-iframe" src="https://www.youtube.com/embed/Jmliox1trPQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="description"></iframe>
                </div>
                <h3>Box3</h3>

**CSS**
main{
    height: 200vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* displays the columns */
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;  
}
.box3{
    grid-column: 1/6;
    grid-row: 8/12;
}
/* the wrapper around the frame */
.wrapper_frame{
    background-color: pink;
    position: relative;
}
.wrapper-iframe{
    position: absolute;
    top: 25px;
    left: 250px;
    width: 1400px;
    height: 350px;
    border: 100%;
}

【问题讨论】：

标签： javascript html css grid css-grid

【解决方案1】：

html 不完整，但如果 iframe 包装器没有完全响应，那么您可以使用它

.wrapper_frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
.wrapper_frame::before {
  display: block;
  content: "";
  /* next line: iframe H:W, example 9:16 = 56,25% */
  padding-top: 56.25%; 
}
.wrapper_frame iframe {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

<div class="wrapper_frame">
  <iframe class="wrapper-iframe" src="https://www.youtube.com/embed/Jmliox1trPQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="description"></iframe>
</div>

【讨论】：