IMA SDK for HTML5 supports
[linear display ads](https://support.google.com/admanager/answer/10058746)
in addition to linear video ads. For details on linear video ads, see
[Video Solutions advertising overview](https://support.google.com/admanager/answer/1711021).

Enabling linear display ads can create added demand for your ad space, because
linear display ads compete with linear video ads for your ad space.
IMA handles rendering linear display ads, but requires you to set up video
content detection. Implementing IMA content detection differs depending on
whether you create your content player in the same origin frame as your ads
player, or if you create your ad player in a cross-origin frame.

> [!NOTE]
> **Note:** To get access to linear display ad demand, you must [set up content detection](https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/linear-display-ads.md.txt#set_up_content_detection). If you don't set up content detection, your inventory is ineligible.

This guide covers setting up content detection to enable linear display ads,
changing the content video player, and stopping collecting content signals.

## Set up content detection

To enable linear display ads for ad requests, do the following:

### Same origin

If IMA SDK shares the same origin as your content player, do either of the
following:

- **Preferred** Pass the video player into the [`AdsManagerLoadedEvent.getAdsManager()`](https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/interface/google.ima.AdsManagerLoadedEvent.md.txt#google.ima.AdsManagerLoadedEvent.getAdsManager)
  call. Even though `getAdsManager()` lets you pass an object containing a
  `currentTime` property, you must pass an `HTMLVideoElement`
  instance into `getAdsManager()` to support content detection.

  ```javascript
  function onAdsManagerLoaded(adsManagerLoadedEvent) {
    // Set any AdsRenderingSettings here.
    const adsRenderingSettings = new google.ima.AdsRenderingSettings();

    // Get the ads manager.
    adsManager =
      adsManagerLoadedEvent.getAdsManager(videoElement, adsRenderingSettings);
  }
  ```
- If you are unable to provide the content player during the
  `AdsManagerLoadedEvent.getAdsManager()` call, call the
  [`AdsManager.configureAdsManager()`](https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/interface/google.ima.AdsManager.md.txt#google.ima.AdsManager.configureAdsManager)
  method with the video player. For content detection to work, it must be
  an `HTMLVideoElement`.

```javascript
function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager =
    adsManagerLoadedEvent.getAdsManager(null);
  adsManager.configureAdsManager(videoElement);
}
```

If you don't set up content detection, Google ad servers might stop serving
linear display ads.

If your content player is in the same origin you load the IMA SDK, you don't
need any changes to your IMA implementation to handle changing the content
player or stopping content signal collection.

### Cross origin

If IMA SDK is cross origin to your content player, IMA can collect content
detection signals through the `CrossOriginProxy` class. This class lets IMA
SDK verify correct linear display ad placement and collect signals related to
subject matter of the video content. If you place the IMA SDK in a
cross-domain iframe, you must implement the `CrossOriginProxy` class.

If you continue to have your content player placed cross origin to the
IMA SDK without implementing the `CrossOriginProxy` class, Google ad servers
might stop serving linear display ads.

To load the `CrossOriginProxy` class into your app, do the following:

1. In your HTML file, import the `ima_proxy.js` file:

   ```html
   <html>
     <head>
       <title>IMA HTML5 cross-origin iframe sample</title>
       <link rel="stylesheet" href="style.css">
     </head>

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

         <!-- The cross-origin iframe where you load IMA SDK and play ads. -->
         <iframe id="adContainerIframe"
                 src="https://cross-origin-domain.com/ads-sandbox.html" >
         </iframe>

       </div>
       <button id="playButton">Play</button>

       \<script src="//imasdk.googleapis.com/js/sdkloader/ima_proxy.js"\>\</script\>
       <script src="main.js"></script>
     </body>
   </html>
   ```
2. In the **main.js** file, get the `CrossOriginProxy` instance.

3. Call the `setVideoElements()` method with an array of all video players
   that show ads on your page or app.

Before making an ad request, you must pass the video elements to the
`CrossOriginProxy` instance with the `setVideoElements()` call. The following
example passes an array containing a single content video player:

```javascript
// On window load attach an event to the play button click
// that triggers playback of the content video element.
window.addEventListener('load', function(event) {
videoContent = document.getElementById('contentElement');
ima.crossOriginProxy.getInstance().setVideoElements([videoContent]);
playButton = document.getElementById('playButton');
playButton.addEventListener('click', playAds);
});
```

## Change the content video player

If you change to or add another content video player, you must pass a new
array to the `setVideoElements()` method. When you make the new
`setVideoElements()` call, IMA starts collecting signals for the new content
player, and stops collecting signals for any content players passed in
previous calls.

The following example passes the new video element to the `CrossOriginProxy`
class:

```javascript
function createNewContentPlayer(newPlayerId) {
newVideoContent = document.getElementById(newPlayerId);
ima.crossOriginProxy.getInstance().setVideoElements([newVideoContent]);

// Continue with any other steps needed to initiate the content player
}
```

## Stop collecting signals when ads are complete

When you finish playing ads and call the
[`AdsLoader.destroy()`](https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/class/google.ima.AdsLoader.md.txt#google.ima.AdsLoader.destroy)
method, you must also call the `setVideoElements()` method with an empty
array. Making the `setVideoElements()` call with an empty array drops the
reference to content players IMA holds and prevents memory leak issues.