How to dynamically position and scale iframe on browser zoom
The Problem
A user can choose to create an iframe by pasting in their iframe code or url. When the window re-sizes the iframe needs to stay positioned in the middle and bottom of the page. I have gotten the iframe to stay in the middle and the bottom of the page for the most part. But when the window re-sizes (a user zooms in(150% etc) or out(50% etc)) the iframe itself gets larger when a user zooms in and smaller when a user zooms out. Since I can't target the contents within the iframe, I have been trying to figure out a way of applying a scale to the iframe so that it would appear to stay the same size and at the same position. I am having trouble dynamically figuring out the scale of an iframe when the window re-sizes.
The Javascript
load event
jQuery('#iframe_wrapper iframe').attr('id','iframe');
jQuery( "#iframe" ).load(function() {
jQuery('#adhesion_iframe').css('-webkit-transform', 'scale(1)');
});
position
ratio = $('#iframe').width() / ($('#iframe').height() + ($('#close_btn')close.length>0 ? 0 : 20));
if (window.innerWidth > window.innerHeight) {
var width = window.innerWidth / 1.5 / 1.5;
$('#iframe_wrapper').css({
width: width + "px",
height: window.innerWidth / ratio / 1.5 + "px",
left: parseInt((window.pageXOffset + window.innerWidth / 2) - (width / 2)) + "px",
top: parseInt(window.innerHeight + window.pageYOffset - window.innerWidth / ratio / 1.5 / 1.5) + "px"
});
iframe
if($('#iframe').length >0 ){
jQuery.fn.center = function(){
this.css("position","absolute");
this.css("top","60%");
this.css("left","50%");
this.css("margin-top","-"+(this.height()/2)+"px");
this.css("margin-left","-"+(this.width()/2)+"px");
return this;}
$('#iframe').center();
$('iframe').css({
'-webkit-transform': 'scale('+(document.body.offsetWidth * scale / initial_width )
});
}
When the page loads the initial scale would be set to 1. I was thinking of doing something like this to dynamically change the scale on window re-size '-webkit-transform': 'scale('+(document.body.offsetWidth * scale / initial_width) . So if the zoom level goes to 150% then the scale would be something like 0.something and if the zoom level goes to 50% then the scale may be 2.something etc..... Sure I can hard code the scale but that would only work on certain iframe sizes (the iframe width and height is dynamically set by the user). So it may work on an iframe that is 300 by 50 but not on one that is 600 by 100 etc.
I think you are overdoing it. Just set the size of the iframe to pixel values with css:
iframe {
width: 400px;
height: 300px;
}