Почему видео перекрывает контейнер?

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%; 
}