XF 1.4 Responsive iFrames

[SatGuyScott]

Ok here is what I am trying to do. I am working with a number of ad agencies, and one agency pays great for 728x90 but their pay for 428x60 don't pay well, while another ad agency pays great for the smaller 428x60 but not so good on the 728x90.

I would like to do this using responsive code, with each screen size calling a different html file via an iframe.

So for a big display it would call the iframe html for 728x90 aka leaderboard.html
For a smaller display it would call the iframe for 428x60 aka banner.html
And for small devices (mobile) it would call the iframe for mobilead.html.

I read all over including https://xenforo.com/community/threads/set-iframe-width-using-responsive-presets.56201/ but thats just for resizing the iframe based on screen size. I want to call a different iframe html source based on screen size.

Can this be done? Thank you!

 

[EQnoble]

To actually be considered responsive it would need to not only show on page load, but display the correct one (and hide or remove the old one) when a user resizes the page.

At any rate what you want to achieve can be done but the only way I know of off the top of my head to do this is with js/jQuery. Depending on your ad agencies they may or may not allow you to do certain aspects of it as they might view it as circumventing their rules.

Simply put, you need something (js) to detect page width on pageload and detect changes in browser width and using present size ranges determine which should be called for each. Based on your post that's as much as I can offer for a direction at the moment.

But to answer your question yes, it can be done.

 

[Arty]

There are two ways to do that:

1. Load all iframes but show only one:

<style>
.ad-frame { display: none; }
.ad-frame.leaderboard { display: block; }
@media (max-width: 750px) {
    .ad-frame.leaderboard { display: none; }
    .ad-frame.banner { display: block; }
}
@media (max-width: 450px) {
    .ad-frame.banner { display: none; }
    .ad-frame.mobilead { display: block; }
}
</style>
<div class="ad-frame leaderboard"><iframe src="leaderboard.html" /></div>
<div class="ad-frame banner"><iframe src="banner.html" /></div>
<div class="ad-frame mobilead"><iframe src="mobilead.html" /></div>

2. Load iframe based on detected browser width during page load. This one will load only one iframe:

<script>
var frame = 'leaderboard',
   width = window.innerWidth;
if (width < 750) frame = 'banner';
if (width < 450) frame = 'mobilead';
document.write('<iframe src="' + frame + '.html" />');
</script>