An HTML5 expand to fullscreen creative is an expanding ad with two sizes, an initial collapsed size and a dynamic fullscreen size. HTML5 expand to fullscreen creatives can be used for desktop, mobile, and in-app.
The smaller collapsed size of an HTML5 expand to fullscreen creative fits within a standard ad placement on a desktop or mobile website, or in a mobile app. The larger size appears to expand outside the collapsed size to optionally fill a smaller, specified amount of the desktop's browser window or mobile device's screen and is always centered. The ad expands when a user clicks a fullscreen button.
This article explains how to make an HTML5 creative expand to fullscreen using Studio’s HTML5 SDK.
Add the Enabler and wait for it to initialize
The Enabler is the core code library of Studio, and is required for all rich media creatives. Add the following script tag to the <head> tag of your HTML file:
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
Wait for Enabler initialization
Nothing in the ad should auto-execute until the Enabler has initialized. This ensures that everything is properly loaded and Enabler methods can be accessed before a user interacts with the ad.
In your JavaScript, verify that the Enabler has initialized using the Enabler’s isInitialized method, which returns true or false. If true, make the call to start your function, in this example, enablerInitHandler(). If false, make a fallback call that listens for the Enabler’s INIT event.
Once the Enabler has initialized, start animation, load image assets, or call tracking methods.
// If true, start function. If false, listen for INIT.
window.onload = function() {
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
}
function enablerInitHandler() {
// Add your code to start ad animation, load images, call Enabler methods or
// use polite loading.
}
Polite loading delays the loading of creative assets until the publisher page is loaded. To set up polite loading, wait for the Enabler to initialize, then call the Enabler's isPageLoaded method. Replace the enablerInitHandler function above with the following code:
function enablerInitHandler() {
if (Enabler.isPageLoaded()) {
politeLoadHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.PAGE_LOADED,
politeLoadHandler);
}
}
function politeLoadHandler() {
// Add your code to start ad animation or load images.
}
If your creative includes autoplaying animation, you may want to wait until the viewer has scrolled the ad into view before playing that animation. To check visibility, call the Enabler's isVisible method.
Replace the politeLoadHandler function with the following code:
function politeLoadHandler() {
if (Enabler.isVisible()) {
adVisibleHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.VISIBLE,
adVisibleHandler);
}
}
function adVisibleHandler() {
// Add your code to start ad animation or load images.
}
Replace the enablerInitHandler function with the following code:
function enablerInitHandler() {
if (Enabler.isVisible()) {
adVisibleHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.VISIBLE,
adVisibleHandler);
}
}
function adVisibleHandler() {
// Add your code to start ad animation or load images.
}
Expand to fullscreen and collapse
Expand to fullscreen creatives expand out in all directions to fill whatever screen they're displayed on. The expanding process includes the following steps. Click each step for more details and example code.
To determine if fullscreen is available, call Enabler.queryFullscreenSupport().
Example code to check if fullscreen is supported
// Create a variable to save fullscreen support.
var fullscreenSupported = false;
// Add a listener to report the result.
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_SUPPORT,
function(event) {
fullscreenSupported = event.supported;
});
Enabler.queryFullscreenSupport();
// Show a hidden fullscreen button after fullscreen support is confirmed.
if (fullscreenSupported) {
// The line of code below assumes you have a button named 'fullscreenButton'.
fullscreenButton.style.display = 'block';
}
The creative will expand to the maximum size possible automatically. If you want, you can check the screen's dimensions and expand to a custom size instead. To get the screen size, call Enabler.queryFullscreenDimensions().
Example code to check screen size before expanding
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_DIMENSIONS,
function(event) {
Enabler.requestFullscreenExpand();
});
fullscreenButton.addEventListener('click',
function(event) {
Enabler.queryFullscreenDimenions();
}, false);
To expand to the maximum screen dimensions, call Enabler.requestFullscreenExpand(). Then listen for the FULLSCREEN_EXPAND_START event. If you want to animate while expanding, call your custom animation method in this event handler.
Example code to expand to fill the entire screen
Enabler.requestFullscreenExpand();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_START,
function(event) {
// (Optional) Add code to start your custom expanding animation.
// If not animating, call Enabler.finishFullscreenExpand(); instead.
Enabler.finishFullscreenExpand();
});
Or, to expand to a custom size (for example, 1280x1024), pass the desired width and height to the method instead:
Example code to expand to a custom size
Enabler.requestFullscreenExpand(1280, 1024);
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_START,
function(event) {
// (Optional) Add code to start your custom expanding animation.
// If not animating, call Enabler.finishFullscreenExpand(); instead.
Enabler.finishFullscreenExpand();
});
When the expansion is complete, call Enabler.finishFullscreenExpand(). Then listen for the FULLSCREEN_EXPAND_FINISH event.
If using an expand animation, call this method when your animation is complete. If not animating, call this method in the handler for the FULLSCREEN_EXPAND_START event. See example above.
Example code to finish expanding
Enabler.finishFullscreenExpand();
// Create a variable to keep track of the expansion state.
var isFullscreen = false;
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_FINISH,
function(event) {
isFullscreen = true;
});
To collapse, you first need a close button in the fullscreen state of your creative. To start collapsing, call Enabler.requestFullscreenCollapse(). Then listen for the FULLSCREEN_COLLAPSE_START event. If you want to animate while collapsing, call your custom animation method in this event handler.
Example code to start collapsing
Enabler.requestFullscreenCollapse();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_START,
function(event) {
// (Optional) Add code to start your custom collapsing animation.
// If not animating, call Enabler.finishFullscreenCollapse(); instead.
Enabler.finishFullscreenCollapse();
});
When the collapse is complete, call Enabler.finishFullscreenCollapse(). Then listen for the FULLSCREEN_COLLAPSE_FINISH event.
If using an collapsing animation, call this method when your animation is complete. If not animating, call this method in the handler for the FULLSCREEN_COLLAPSE_START event. See example above.
Example code to finish collapsing
Enabler.finishFullscreenCollapse();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_FINISH,
function(event) {
// Set the variable created in the "Complete the expansion" step.
isFullscreen = false;
});