image resize inside iframe inside iframe

Question

Basically we're using a service provided by gapphotos.com where by we can call there images into our site via an iframe. This iFrame then contains another iframe that holds the image. Problem I'm faced with is their images come in two sizes 161x161 or 320x320 roughly. All I want to do is go into these two iFrames with jQuery and alter the height/width.

var f = $('#iFramePic1');
f.load(function() {
    var iF = f.contents().find('iframe');
    iF.load(function() {
        iF.contents().find('img').height(100);
    });
});

This is the jQuery I'd used to try and attempt that but it comes back with the

Blocked a frame with origin "http://localhost:1506" from accessing a frame with 
origin "http://www.gapphotos.com". Protocols, domains, and ports must match.

I've looked into EasyXDM but can't find suggestions to go 2 iFrames deep. Any help would be much appreciated as this is on a tight schedule.

Answer 1

That would be impossible, because the iFrame has another origin. The iFrame is not accessible, since cross domain iFrames could be easily missused for CrossSiteScripting

http://en.wikipedia.org/wiki/Same-origin_policy

i don't exacly know if this applies to css styles too, you might want to try and use a css to set your own height and width...