Question

我正在尝试调整视频容器的高度，但由于某种原因，它的高度不必要地大。

CSS：

.indexVideoContainer{

display:flex;
flex-direction: column;
background-color: #fff;
background-image: url(https://bellroy.imgix.net/cms_images/1259/background-texture-repeat.jpg?auto=format&fit=max);
width: 100%;


}
.indexVideoText{
    position: relative;
    font-family: "PT Serif", serif;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    margin: 5px auto 20px auto;
    font-weight: 400;
    /* line-height: 32px; */
    color: #666;
    font-weight: 500;
    font-size: 25px;
    line-height: 40px;
    margin: 0 auto 40px auto;
    max-width: 55%;
    top:50px;
}
.videoContainer{

    position:relative;
    padding-bottom:60.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
    border:1px solid black;

}
.videoContainer iframe{
    position:absolute;
    margin: auto;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:70%;
    height:60%;

}

Codepen： https://codepen.io/anon/pen/MZNgYa

检查.videoContainer类。我添加了边框以进行更好的演示。它的高度不必要地大。由于某些原因，扩展过多。如何以响应方式使其更短？

problem image

编辑：我还是有问题的人。我设法解决了一些问题，但是我想我在视频框和flexbox上缺少了一些东西。

Answer 1

html：

<div class="indexVideoText">
sometext
</div>
<div class="videoContainer">
<iframe title="hQ6TSIFM8I0" width="80%" height="80%" frameBorder="0" src="https://www.youtube-nocookie.com/embed/hQ6TSIFM8I0?autoplay=1&amp;loop=1&amp;playlist=hQ6TSIFM8I0&amp;origin=bellroy.com&amp;modestbranding=1&amp;showinfo=0&amp;rel=0&amp;version=3&amp;mute=1"></iframe>

</div>

CSS

.indexVideoText{
    position: relative;
    font-family: "PT Serif", serif;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    margin: 5px auto 20px auto;
    font-weight: 400;
    /* line-height: 32px; */
    color: #666;
    font-weight: 500;
    font-size: 25px;
    line-height: 40px;
    margin: 0 auto 40px auto;
    max-width: 55%;
    top:50px;
}
.videoContainer{
    position:relative;      
    height:500px;
    overflow:hidden;
    border:1px solid black;
  background-color:red;
  padding-top:20px;
  padding-bottom:20px;
}
 iframe{
    position:absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:70%;

}

视频容器的CSS调整高度

1 个答案: