How to dynamically display mobile-sized IMA Video Ads instead of desktop-sized video ads when a phone user visits the web page

Question

My website displays some video ads with the following code. Currently, all videos are always 640px wide, but the problem is that these 640px videos do not fit on the mobile phone screen.

The web page becomes scrollable because of the video. How can I force the video size to fit a smaller screen if the URL parameter 'mobilesize=1' exists? The current code does not work.

        const adsRequest = new google.ima.AdsRequest();
            
        adsRequest.adTagUrl = 'XX'; 
            
        // Specify the linear and nonlinear slot sizes. This helps the SDK to
        // select the correct creative if multiple are returned.
        adsRequest.linearAdSlotWidth = 640;
        adsRequest.linearAdSlotHeight = 480;

        adsRequest.nonLinearAdSlotWidth = 640;
        adsRequest.nonLinearAdSlotHeight = 240;


        if (getUrlParam("mobilesize")=="1") {
                adsRequest.linearAdSlotWidth = 401;
                adsRequest.nonLinearAdSlotWidth = 401;
        }

Answer 1

Your code is only modifying the width, but you should also adjust the height to maintain the correct aspect ratio.

const adsRequest = new google.ima.AdsRequest();
adsRequest.adTagUrl = 'XX';

// Set default slot sizes for desktop.
let linearAdSlotWidth = 640;
let linearAdSlotHeight = 480;
let nonLinearAdSlotWidth = 640;
let nonLinearAdSlotHeight = 240;

if (getUrlParam("mobilesize") == "1") {
  // Adjust slot sizes for mobile.
  linearAdSlotWidth = 401;
  linearAdSlotHeight = 301; // Maintain the aspect ratio (4:3).
  nonLinearAdSlotWidth = 401;
  nonLinearAdSlotHeight = 151;
}

adsRequest.linearAdSlotWidth = linearAdSlotWidth;
adsRequest.linearAdSlotHeight = linearAdSlotHeight;
adsRequest.nonLinearAdSlotWidth = nonLinearAdSlotWidth;
adsRequest.nonLinearAdSlotHeight = nonLinearAdSlotHeight;