为什么视频与容器重叠？

Question

如果扩展结果窗口，视频会与其下方的部分重叠。

我希望视频保持在该部分的高度内，在本例中为height:100vh。

我该怎么做？ Here's a jsFiddle

* {
    padding: 0px;
    margin: 0px;
}

.Page-01 {
    width: 100%;
    height: 100vh;
    background-color: #0000ff;
    margin: 0;
    padding: 0;
    z-index: 15;
}

.Page-02 {
    width: 100%;
    height: 100vh;
    background-color: #FFFF00;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 15;
}

#videowrapper {
    padding-bottom: 56.2%;
    overflow: hidden;
    z-index: 15;
    height: 0;
}

#videowrapper iframe {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.Page-03 {
    width: 100%;
    height: 100vh;
    background-color: #FF0000;
    margin: 0;
    padding: 0;
    z-index: 15;
}

Answer 1

由于#videowrapper iframe设置为height: 100%;但其父级的高度为#videowrapper { height: 0; padding-bottom: 56.2%;

，因此会出现一些奇怪的内容

尝试改为设置：

#videowrapper {
    overflow: hidden;
    z-index: 15;
    height: 100%;
}