How do I show banners of multiple heights inside the same zone based on the screen size?

[Kabyanil Talukdar]

Hello,

I have been trying to display multiple banners of different heights depending upon the screen size. I'm using HTML banner to achieve this. First, I am uploading 3 banners (one for desktop, one for tab, one for mobile) using the WYSIWYG editor. After upload, I am switching to text based editor and adding JavaScript to append the images into a div according to the screen size. My current implementation looks like this -

 

<div id="ad_placeholder" style="text-align: center;"></div>
<script>

if (screen.width > 600) {

// desktop
document.getElementById('ad_placeholder').innerHTML = '<img src="{img_url_prefix}/dc37e4c835c50b5d1a34e9d5c8a0c0a4.png" alt="" width="300" height="728" />';

}

else if (screen.width > 600 && screen.width<= 1200) {

// tablet
document.getElementById('ad_placeholder').innerHTML = '<img src="{img_url_prefix}/066856651ffe92faa1f53b7697323ad0.png" alt="" width="728" height="90" />';

} 

else {

// mobile
document.getElementById('ad_placeholder').innerHTML = '<img src="{img_url_prefix}/12ded462d106e8bf0c220c01fb7fd26c.png" alt="" width="300" height="250" />';

}
</script>

 

 

However, the zone I created (specified width *, height *) gets embedded into the website as an <iframe>. Due to which, I am not able to adjust the iframe height based on the content inside it. I tried adjusting the height using JavaScript, but received a cross origin error.

How do I show banners of multiple heights inside the same zone based on the screen size?