# Creatives > Video Header Ad

Source: https://help-display-sdk.equativ.com/creatives/video-header-ad.html

This page describes the in-app video header ad format: where it should be displayed, how to implement it and the available APIs.

---

## Overview

The __Video Header Ad__ format is an outstream video displayed on top of the screen, shrinking itself according to the scroll and displayed above the content of your application once small enough. This is actually not a dedicated ad object but a specific integration of the `SASBannerView`.

[Video](https://help-display-sdk.equativ.com/assets/images/video-header-ad-demo.mp4)

As most of this integration must be done on the application side and can not be easily done on the **Equativ Display SDK** side, we provide everything you need to integrate this format seamlessly in your app.

## Setup your insertion on _Equativ Monetization Platform (EMP)_

First of all you have to setup a dedicated ad insertion for your video header ad integration.

To do so, create an insertion as you usually do, and make sure to choose one of the templates named __Video-Header__ compatible with the _App_ environment.

You will find more information about the insertion management in __EMP__ [here](https://help.smartadserver.com/s/article/Insertions-General-settings).

## Integration

### Overall information

You will find our Video Header Ad integration samples by clicking the following buttons.

[Android samples on GitHub](https://github.com/smartadserver/equativ-display-sdk-video-header-ad-sample-android) [iOS samples on GitHub](https://github.com/smartadserver/equativ-display-sdk-video-header-ad-sample-ios)

For both platform, the integration follows the same idea:
- We create an object wrapping a `SASBannerView` called `SASVideoHeaderAd` on Android and `SASVideoHeaderAdCell` on iOS.
- This `SASVideoHeaderAd` object has all the code needed to update its wrapped `SASBannerView` size following the scroll of your app.
- This `SASVideoHeaderAd` object must be displayed as the content of the very first cell of your list.
- You have to inform this `SASVideoHeaderAd` object about the scrolling events, using dedicated APIs.
- You have to specify a dedicated area in your layout where the ad will be moved to once the list is scrolled enough to trigger the "stick to top" effect.

### Android dedicated integration

##### Copy the needed classes in your project

You have to copy the class named `SASVideoHeaderAd` that you will find in the following location: `src/main/kotlin/com/equativ/displaysdk/ad/banner/SASVideoHeaderAd.kt`.

##### Update your layout to achieve the stick-to-top effect

In your activity's layout, define a view which will contain the video header ad once it must be sticked to top. To achieve a proper stick-to-top effect, this container view must overlay any other view of your activity and must be positioned close to the top of the screen.

In the sample, we chose the following solution. Please take a look to the `FrameLayout` with the `headerAdStickToTopContainer` id:

#### XML

```xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical">

    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/swipeRefreshLayout" >

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </androidx.recyclerview.widget.RecyclerView>

    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/headerAdStickToTopContainer" />
</FrameLayout>
```

##### Instantiate and configure your `SASVideoHeaderAd` object

You will find in the `VideoHeaderAdActivity` how we integrate the `SASVideoHeaderAd` object as content of our first list cell.

The most important things to do are:

- Add the `SASVideoHeaderAd`'s `stickToTopContainerView` to your "header ad stick to top container" view:

#### Kotlin

```kotlin
binding.headerAdStickToTopContainer.addView(videoHeaderAd.stickToTopContainerView)
```

- Listen to the scroll events of your recycler view and forward the appropriate values to the `SASVideoHeaderAd` instance:

#### Kotlin

```kotlin
binding.recyclerView.addOnScrollListener(object: RecyclerView.OnScrollListener(){
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        super.onScrolled(recyclerView, dx, dy)
        videoHeaderAd.onParentViewScrolled(dx, dy)
    }
})
```

And that's enough to have a fully working `SASVideoHeaderAd`. This way, the `SASVideoHeaderAd` will be aware of the scroll changes and will automatically adapt the size of the `SASBannerView`. Then,
once the ad is small enough, it will move the `SASBannerView` from its view to its `stickToTopContainerView` that you added in your own "header ad stick to top container".

The `SASVideoHeaderAd` also has a listener similar to the `SASBannerView.BannerListener`. Implementing it is totally optional.

There is some more details and tips to integrate this ad format in our sample, so we advise you to open it and try it by yourself! [Click here to checkout the Android sample](https://github.com/smartadserver/equativ-display-sdk-video-header-ad-sample-android).

### iOS dedicated integration

##### Copy the needed classes in your project

You have to copy the files named `SASVideoHeaderAdCell.swift` and `SASVideoHeaderAdCell.xib` that you will find in the folder: `VideoHeaderAdSample/`.

##### Instantiate and configure your `SASVideoHeaderAd` object

You will find in the `VideoHeaderAdViewController` class how we integrate the `SASVideoHeaderAdCell` object as content of our first list cell.

The most important things to do are:

- Add the the current ViewController's view as `stickToTopContainerView` to your `SASVideoHeaderAdCell` instance:

#### Swift

```swift
headerAdCell.stickToTopContainerView = self.view
```

- Listen to the scroll events of your `tableView` and forward the appropriate values to the `SASVideoHeaderAdCell` instance:

#### Swift

```swift
// MARK: - UIScrollViewDelegate methods

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    headerAdCell.scrollViewDidScroll(offset: scrollView.contentOffset)
}
```

And that's enough to have a fully working `SASVideoHeaderAdCell`. This way, the `SASVideoHeaderAdCell` will be aware of the scroll changes and will automatically adapt the size of the `SASBannerView`.
Then, once the ad is small enough, it will move the `SASBannerView` from its own view to its `stickToTopContainerView` that you set.

The `SASVideoHeaderAdCall` also has a delegate protocol similar to the `SASBannerViewDelegate`. Implementing it is totally optionnal.

There is some more details and tips to integrate this ad format in our sample, so we advise you to open it and try it by yourself! [Click here to checkout the iOS sample](https://github.com/smartadserver/equativ-display-sdk-video-header-ad-sample-ios).

Note that this particular integration requires the use of a simple `UIViewController`, it will not work with a `UITableViewController`.