jquery - Maintaining the scale of an element on different window sizes -

i trying maintain element in perfect scale on responsive design. width should 100% , height should 56% of width.

however, if dimensions of window change, , height of window reduced, width should reduced proportionally, keep in scale.

likewise if width of window made more narrow, want width adjust well, proportionally.

the width of element based on width of window.

<div id="intro_cont">  <div id="video_cont">     <div id="text_cont">         <p id="intro_text" class="intro_text">looking reliable, accurate measurement equipment?</p>         <p id="intro_text2" class="intro_text">we can you</p>         <div id="play_cont">             <div id="play_button"></div>         </div>               </div>     <div id="intro_video">         <iframe id="video_iframe" src="//www.youtube.com/embed/#t=0s" frameborder="0" allowfullscreen></iframe>     </div> </div> 

$(window).resize(function(){     dimension = 0.56;     cont_width = $('#video_cont').width();     cont_height = $('#video_cont').height();     video_width = cont_width;     video_height = video_width * dimension;     if(video_height < video_width * dimension) {         video_height = video_width * dimension;     }      $('#video_iframe').css({'width':video_width,'height':video_height}); }); 

this code works when adjust width, when height changes, element doesnt scale.

this educated guess, may constraining video_height while width still independent parameter. try adding code block use other if statement:

if(video_width > video_height / dimension) {     video_width = video_height / dimension; }