Google IMA and responsiveness

[lesssugar]

Hello,

I'm using standard HTML5 <video> element to display videos on my mobile website.

I'm also serving preroll ads, using Google IMA HTML5 SDK and an ad server.

The problem I have is with the viewport change: Basically, when the preroll is running, and viewport is changed from portriait to landsape,

the preroll ad does not adjust to the responsive container, it's displayed with fixed width and height values it got when loaded in portrait mode.

How do I handle responsiveness of my ads?

[lesssugar]

OK, I understand that I can send width and height to Google IMA only when I request ad.

When the ad is being played, there's no way to responisively change the ads resolution

which means I need to do in manually, by listening to window 'resize' event, and dynamically applying new width and height

to the ad iframe.

Am I correct?

[Shawn Busolits (IMA SDK Team)]

Hi there,

You should be able to use AdsManager.resize to change the size of the ad during playback. Give that a shot and let me know if it works for you.

Thanks,

Shawn Busolits

IMA SDK Team

[lesssugar]

Thanks a lot Shawn! It works, and this is how I did it (for anyone interested):

// onAdsManagerLoaded
adsManager = adsManagerLoadedEvent.getAdsManager(videoElement);

....
....

// On content initialization
window.addEventListener('resize', onWindowResize);

...
...

function onWindowResize() {

    var adContainerWidth = adContainer.offsetWidth,

        videoHeight = videoElement.offsetHeight;

    adsManager.resize(adContainerWidth, videoHeight, google.ima.ViewMode.NORMAL);
}

where adContainer and videoElement are globals.

Let me know if something is wrong here.

[Shawn Busolits (IMA SDK Team)]

Glad you got it working, thanks for the follow-up!

[Dejan Stanojevic]

Hi lesssugar,

Can you please share with me your responsive script. I am tryin to make with your and Shawn help...
I am using template: https://developers.google.com/interactive-media-ads/docs/sdks/html5/quickstart#requestAds

[lesssugar]

Hi Dejan,

That was some time ago, but I used something like this:

var adContainer = document.getElementById('adContainer'),

function onWindowResize() {
 // Adjust ad resolution when device orientation changes
 var newAdContainerWidth = adContainer.offsetWidth,
 newVideoHeight = videoElement.offsetHeight;
 

 adsManager.resize(newAdContainerWidth, newVideoHeight, google.ima.ViewMode.NORMAL);
 }

Where adContainer is a DOM element holding the ads and adsManager is your global ad manager object. 

The adContainer was responsive, so I used it to resize the ads I served. Hope This helps.

[Dejan Stanojevic]

Hi lesssugar,
Tnx for fast response

where U call onWindowResize() ?

[lesssugar]

It's in the thread. Take a look at the posts before.

[dh...@gamezop.co]

Hi Shawn

I did this same and it was working great on chrome. There is an issue in Safari and some other browsers, that when adManager.resize is called it reloads the ad and calls new ad. Is there any solution around this?

Thanks

Dhruv