When extending the result window, the video ends up overlapping the section below it.
I am looking to keep the video within the confines of the section's height, which is set to height:100vh.
Is there a way to accomplish this? Check out this jsFiddle link for reference.
* {
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;
}