You could also achieve the desired effect without the use of Javascript by setting the aspect ratio in the containing elements padding-top: 56.25%;
. The page element will need to be anchored, for example top: 0; right: 0;
and set you width/height to 100%. Here is an updated JSFiddle for your review: CLICK HERE
HTML:
<div id="container">
<div id="page"></div>
</div>
CSS:
#container{
position: relative;
padding-top: 56.25%; /*16:9 aspect ratio*/
background:#ff0;
}
#page{
position: absolute;
width:100%;
height: 100%;
top: 0;
right: 0;
background:red;
opacity: 0.5;
}