Javascript Function
includes: the id of the iframe, the original width and original height
function resizeiframecent(ifid,oldx,oldy){
var actualwidth = document.getElementById(ifid).offsetWidth;
var proporcion = actualwidth/oldx;
newheight=proporcion*oldy;
var newheight2 = Math.ceil(newheight);
document.getElementById(ifid).height=newheight2;
}the iframe
<iframe id="iemovie" onload="resizeiframecent('iemovie','800','450')" src="http://www.youtube.com/embed/J-HieaOI00s?html5=1" width="100%" ></iframe>- the iframe tag was broken to avoid rendering
- notice the height is absent but the width is 100%. it will adjust to the parent element's width; usually a div with its preset width, say 800px for desktop, and 90% for mobile.
- notice the onload attribute
- when iframe loads the function takes the original proportions oldx and oldy and compares them to the actualwidth
- the math.ceil funtion rounds up the newheight and creates a new variable called newheight2
- then, the iframe gets a newly defined height atribute based proportionally based on the original height
- do not set the iframe proportions via css or else you will have to change the code from document.getElementById(ifid).height=newheight2;to document.getElementById(ifid).style.height=newheight2;