Question

我的网页上有两个iframe。两者的底部都有一个flex-direction：列容器。这两个容器都位于flex-direction：行容器。

我试图在相应的iframe视频上方实现两段文字，但是我在使用iframe时遇到了一些棘手的问题。

我的iframe处于位置：绝对；我的容器的位置是：相对；但是，当我在同一个容器中调整视口文本的大小时，容器中的文本全部落入iframe的后面并被隐藏。

在我的手机@media中，它可以完美运行。 class =“ quest-news”中的ext用螺栓固定在iframe的底部，并随着iframe尺寸的增加而自然向下移动，但是在我的平板电脑@media中，它会将自己隐藏在iframe的后面，或者随着iframe的移动而越来越远我增加了视口。

这是怎么回事？

HTML：

    <main>
      <div class="chan-content">
        <div class="column">
          <div class="column-text">
            <h3 id="hide">Bla bla bla</h3>
            <p id="hide" class="col-p-shift">
              Bla bla bla
            </p>
          </div>
          <div class="vid-contain vid-anim">
            <iframe src="https://www.youtube.com/embed/momqQl-9-tg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
        </div>
        <div class="column">
          <div class="column-text">
            <h3 id="hide">Bla bla bla</h3>
            <p id="hide" class="col-p-shift">
              Bla bla bla
            </p>
          </div>
          <div id="hide" class="vid-contain vid-anim">
            <iframe src="https://www.youtube.com/embed/xAngb0wRZJM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
        </div>
      </div>
      <div class="quest-news">
        <h1 class="text-style">Common Questions</h1>
      </div>
    </main>

CSS：

.container  {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px 340px 1fr 50px;
  grid-template-areas:
    "header"
    "advert"
    "main"
    "footer";
  text-align: center;
}

header  {
  grid-area: header;
  display: flex;
  flex-flow: wrap;
  flex: 0 1 auto;
  justify-content: space-evenly;
  align-items: center;
  padding: 5px 0 15px 0;
  font-size: 1.3em;
}

main  {
  grid-area: main;
}

advert  {
  grid-area: advert;
  background: url(./mi-vr-5.jpg);
}

footer  {
  grid-area: footer;
  margin: 1em 0 0 0;
}

.title  {
  font-size: 3em;
}

.title-shift  {
  margin: 90px 0 0 0;
}

.title-shift-h3  {
  transform: translate(0, -25px)
}

.title-shift-p  {
  transform: translate(0, 15px)
}

.text-style  {
  background: -webkit-linear-gradient(80deg, white, #AEC6DF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.channel  {
  display: flex;
  justify-content: space-evenly;
  font-size: 1em;
}

.chan-img  {
  width: 160px;
  height: 40px;
  border-radius: 5px;
  transition: 1s;
}

.chan-img:hover  {
  transform: scale(1.1);
  transition: 1s;
}

.chan-content {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56%;
  margin: 8px 0 0 0;
}

iframe  {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
}

#hide  {
  display: none;
}

@media only screen /* Tablet */
  and (min-width: 768px) {
    .container  {
      grid-template-columns: 1fr;
      grid-template-rows: 50px 340px 1fr 50px;
      grid-template-areas:
      "header"
      "advert"
      "main"
      "footer";
    }

    .channel  {
      justify-content: center;
      align-content: center;
    }

    .chan-text  {
      transform: translate(0, 18px);
      margin: 0 20px 0 40px;
    }

    .chan-content  {
      display: flex;
      position: relative;
      flex: 0 1 auto;
      width: 100%;
    }

    .column  {
      display: flex;
      flex-direction: column;
      margin: 0 10px 0;
      width: 50%;
    }

    .vid-contain  {
      position: relative;
      overflow: hidden;
      padding-bottom: 56%;
    }

    .column-text  {
      min-height: 320px;
    }

    #hide  {
      display: block;
    }

    .vid-anim  {
      animation-name: opacity;
      animation-duration: 6s;
    }

  }

Answer 1

正在工作的小提琴：https://jsfiddle.net/9q25gx84/3/

我所做的是更改样式：

.chan-content {
  position: relative;
  width: 100%;
  margin: 8px 0 0 0;
  display: flex;
  padding-bottom: 56%;
}

以及媒体查询中的同一类：

.chan-content  {
    display: flex;
    position: relative;
    flex: 0 1 auto;
    width: 100%;
    padding-bottom: 0;
 }

因此，我们仅将padding-bottom: 56%;用于较小的视口，以保持适当的视频比例。对于最大的视口，则不需要这样做，因为每个视频的底部都应保持适当的填充。

iframe或其容器不会以相对方式起作用？

1 个答案: