# Display poster image for audio ads

This guide demonstrates how to use the IMA HTML5 SDK to overlay your video
player with a poster image when audio ads are played. This should be used when
`ad_type=audio_video` is set in your VAST URL request. Doing this allows for
improved ad monetization as both audio and video ads are eligible and complete
to be served. See the [`ad_type`
documentation](https://support.google.com/admanager/answer/10678356#ad_type)
and [Audio in video
content](https://support.google.com/admanager/answer/7642796#audio-in-video-content)
for more details.

You can follow along with this guide, making the changes to a basic IMA
integrations, or see the
[audio in video sample app](https://github.com/googleads/googleads-ima-html5/tree/main/audio_in_video)
for a full integration with this feature.

## Prerequisites

- An app implementing the IMA HTML5 SDK for video ads. See the [IMA HTML5
  getting started guide](https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side) for more information.
- A default poster image which overlays the video player when an audio ad is served without a relevant overlay image. In order for the image to fit within the video player, its width must be less than or equal to that of the video player and its height must be at least 75 px less than that of the video player.

## Enable the poster image feature

Before making your audio and video ad request, set the `audioPosterImageEnabled`
feature flag to `true` and the `audioPosterImageDefaultUrl` feature flag to
your default poster image URL. Do this with the
[`ImaSdkSettings.setFeatureFlags()`](https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/interface/google.ima.ImaSdkSettings#google.ima.ImaSdkSettings.setFeatureFlags)
API before creating the `AdDisplayContainer`. When this is set and an audio ad
is playing, IMA automatically overlays an image related to the ad on top of the
video player. IMA chooses the largest companion ad image available that fits
within the video player and is at least 75 px shorter than the video player.
If the ad's VAST doesn't include an image that IMA can use as an overlay, IMA
uses your specified default image as an overlay.

    function initializeIMA() {
      console.log('initializing IMA');
      adContainer = document.getElementById('ad-container');
      google.ima.settings.setFeatureFlags(
    {
    'audioPosterImageEnabled': true,
    'audioPosterImageDefaultUrl':'http://your-ad-overlay/image.png'
    });
      adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
      adsLoader = new google.ima.AdsLoader(adDisplayContainer);

      // Let the AdsLoader know when the video has ended
      videoElement.addEventListener('ended', function() {
        adsLoader.contentComplete();
      });

      var adsRequest = new google.ima.AdsRequest();
      adsRequest.adTagUrl = 'http://your-audio-video-ad-tag';
      ...
      // Pass the request to the adsLoader to request ads
      adsLoader.requestAds(adsRequest);
    }