Jquery (or CSS) to Make a Cross Domain Responsive iFrame

I have an embed code that uses an iframe. Now, I typically just state the width and height of the iframe in pixels (16x9) for users to use on their own sites, but with responsive coming along I was wondering if I could, with CSS or jquery, to allow the user to select 100% width and then allow the iframe to figure out its current width, which I’ve been doing fine from within the iframe with:

finalwidth = $(window).width();

And that alerts the right width, when I do an alert. I’ve taken the width and created a height with

fheight = finalwidth*.5625;

However, I can’t figure out a way to change the height of the iframe from within the iframe while it’s embedded on another domain.

Is this at all possible? The content inside the iframe is already setup to be responsive, I just want the iframe to be responsive to the changes in page dimensions its embedded on.

Cheers!
Ryan

I think that could only be done if the parent page has a javascript function that accepts the width and height, so that the iframe can call that parent function and give the size that it wants the parent to change the iframe to be.

In other words, it can only be done with complete cooperation between the parent page and the iframe.

As they are on different domains the script on the sending domain would need to use postMessage() to send the message and the receiving script would need to be listening for message events to receive the information.

It would all be embed, I wouldn’t have the publishers change their own pages to make it work. Unless they can reference a 3rd party script from their main page. so my embed would look something like

<script src="http://www.mydomain.com/script.js"></script>
<iframe src="http://www.mydomain.com/iframe.php"></iframe>

Would that work?

Cheers!
Ryan

yes - that would run on their domain rather than yours. It is the normal way of providing scripts that listen for messages generated from the provider;'s domain.