Enable skippable ads on mobile

  • Inline video playback and muted autoplay are supported on Android and iPhone as of Chrome 53 and iOS 10.

  • This guide shows how to modify a simple sample to enable inline playback and muted autoplay.

  • For skippable ads on iPhone, your video player must play content inline and custom playback needs to be disabled.

  • The HTML and JavaScript modifications ensure content plays inline on iPhone and the IMA SDK uses its own player for ads on iPhone.

  • Enabling skippable ads with this method breaks fullscreen implementations that rely on videoPlayer.requestFullscreen() on iPhone.

As of Chrome 53 and iOS 10, Android and iPhone support inline video playback and muted autoplay. This guide walks you through the modifications to the simple sample required for this functionality.

Skippable ads require that your video player play content inline (not fullscreen), and that you disable custom playback on iPhone. Custom playback is always disabled on Android Chrome. Modify the simple sample's HTML and JavaScript as follows:

index.html

<video id="contentElement" playsinline>
  <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4">
</video>

ads.js

google.ima.settings.setDisableCustomPlaybackForIOS10Plus(true);
adDisplayContainer =
    new google.ima.AdDisplayContainer(containerElement, contentVideoElement);
adsLoader = new google.ima.AdsLoader(adDisplayContainer);

The change to the HTML ensures that your content plays in an inline video player on iPhone, instead of iPhone's default fullscreen player, and starts in a muted state. The JavaScript change causes the IMA SDK to use its own video player to play ads, instead of reusing your content player as it normally would on iPhone.