I've been working on making my player div responsive in terms of height. Currently, when I resize the width, the div scales down accordingly. However, resizing the height does not have the same effect. The scrollbar doesn't seem to help either due to the fixed nature of the lightbox-wrap div.
Is there a way to make the player div responsive in terms of height as well, without changing the fixed positioning of the lightbox-wrap?
https://jsfiddle.net/x723zrde/7/
.lightbox-wrap {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.lightbox {
position: relative;
width: 90%;
max-width: 520px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.player {
position: relative;
background: #ad3;
}
.player:after {
padding-top: calc(56.25%);
display: block;
content: '';
} <div class="lightbox-wrap">
<div class="lightbox">
<div class="player"></div>
</div>
</div>