---
description: 'Build Guide: Creating an Ad from a In-Banner Video Template'
---

# In Banner Video

## Intro

The In-Banner Video Template allows you to integrate video content seamlessly within a standard display ad, making it an engaging yet non-intrusive way to capture user attention. This tutorial will guide you through setting up the template, customizing the video playback settings, and refining text and design elements to align with your brand. Watch the tutorial video below for an overview before following the step-by-step instructions.

Have a look at the end result of this tutorial here: [In Banner Video Example](https://studio.responsiveads.com/creatives/67d9743c7782ab53666fe17d/preview?#/responsive-all)



#### Downloadable Assets for this Tutorial:

{% file src="https://1588470797-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAs6tyouSPGAAcvS6CYBG%2Fuploads%2FsIZUA2yolmNt9GFnp27C%2FIn-banner%20Video%20Demo%20Assets.zip?alt=media&token=acf21f7e-4a8e-468c-9ae1-60a2c65664fe" %}

***

## Watch The Video Tutorial:

{% embed url="https://www.loom.com/share/7df1439ab2124c26a0b70ba29d2230c2?sid=371d0140-73c7-48d1-82a2-c68d38bba8f3" %}

Have a look at the end result of this tutorial herHave a look at the end result of this tutorial here: [In Banner Video Example](https://studio.responsiveads.com/creatives/67d9743c7782ab53666fe17d/preview?#/responsive-all)



***

## Follow the Step by Step Guide:

### Step 1: Click on the templates tab, and find the In-Banner Video template

You can find the templates in the templates tab in the top navigation. Here you will find all the templates available in your account:

<figure><img src="https://1588470797-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAs6tyouSPGAAcvS6CYBG%2Fuploads%2FVeliaE0KGoGObMq2NenH%2Fin%20banner%20video.jpg?alt=media&#x26;token=af798a2d-966b-41e3-9bd3-cd59b2cca0b5" alt=""><figcaption><p>The In-Banner Video Template on the Templates Tab</p></figcaption></figure>

For this tutorial we will use the “In-Banner Video” template.

* Hover the template and click on use.

### Step 2: Name your creative and add metadata

You will be asked to name your creative. You can name it to your preferences, however, our recommendation is to use a naming convention that will make it easier for you to find your creative later.

* A useful naming convention is: brand\_campaign\_descriptor.

<figure><img src="https://1588470797-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAs6tyouSPGAAcvS6CYBG%2Fuploads%2FVZU0OfnyquTXRUG5YMz2%2FScreenshot%202025-03-19%20at%203.08.48%E2%80%AFPM.png?alt=media&#x26;token=77442650-da3a-427f-9ba5-7d39964988a5" alt=""><figcaption><p>Naming your Creative</p></figcaption></figure>

Next you will be prompted to add some useful metadata like advertiser, market or category for your ad. We recommend adding all the metadata so it’s easier to find your creative later on.

For this demo you can just fill out the advertiser’s name.

* Click on Start Creating

<figure><img src="https://1588470797-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAs6tyouSPGAAcvS6CYBG%2Fuploads%2F6VsUCXaLOBrYcBOcu0MV%2FScreenshot%202025-03-19%20at%203.09.11%E2%80%AFPM.png?alt=media&#x26;token=0a093fe3-70df-47e6-bb79-7f1002ff967c" alt=""><figcaption><p>Metadata page</p></figcaption></figure>

### Step 3: Before customizing - The Basics

{% hint style="info" %}
If you have read other build guides, you can skip to [Step 4](#step-4-add-your-format)
{% endhint %}

**Build once, run anywhere**

One of the most powerful concepts of our platform is “build once, run anywhere”.

Typically you have to manually resize creatives once at a time so you can traffic your campaign to different sizes across your inventory - the resizing process can take from days to weeks. However, Our fluid technology allows us to create ads in many formats and sizes at the same time without the need to do “resizes”.

We achieve this by allowing you to add different sizes and formats to an existing ad, and providing tools to customize your ad for all those different formats.

**Getting to know the builder**

* [**Elements Panel:**](../../../creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#elements-list) Sitting on the left side of the screen, you can find all the elements that are used in the ad. Like logos, text, images, videos, buttons.
* [**Settings Panel:**](../../../creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#right-sidebar) Sitting on the right side, this is where you can modify the properties of the creative and elements.
* [**Tool bar:**](../../../creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#reset-zoom-button) At the top you can find the zoom, undo and redo option, as well as the History which allows you to go back to a previously saved version of your ad.
* [**Formats Panel:**](../../../creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#formats-panel) On the left side of the screen, above the Elements Panel. It allows you add the different formats that you want to create your ad as.



### Step 4: Add your format

Today we are creating our ad as a Programmatic Fluid 250, but the same steps can be applied for any of our supported formats (e.g. IAB standard sizes).

**Steps:**

* From the Formats Panel click on the + button. This will open the formats panel.
* Select the **Programmatic Fluid 250** format at the top of the list.
  * You can select many different formats on this step but we recommend only doing the Programmatic Fluid 250 only so it’s easier to follow.
* Click on the “Add Selected” button. This will add the new format to your ad



You will notice a new format on the Formats panel called **Programmatic Fluid 250**. You can click on each size available to familiarize yourself with each layout.

\


### Step 5: Customize your ad

We have included a set of demo assets that you can use for this tutorial. Download using the link below.

{% file src="https://1588470797-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAs6tyouSPGAAcvS6CYBG%2Fuploads%2FsIZUA2yolmNt9GFnp27C%2FIn-banner%20Video%20Demo%20Assets.zip?alt=media&token=acf21f7e-4a8e-468c-9ae1-60a2c65664fe" %}

The In-banner Video Template already comes with all elements laid out for you in many different sizes. Which you can access from the Formats Panel.

The layout(e.g. Position, and style of elements) for each size of your ad can be updated independently, however you can copy your styles and layout for each element to some or to all the sizes added to your ad.

Our recommendation is to start from the larger size. Once your larger size is ready, you can copy your element styles to the other sizes. And tweak smaller sizes as needed.

#### **Updating the existing elements:**

* **Customize the Video**

1. Select the Video layer from the Elements Panel
2. Click on “Replace Video” from Assets Tab of the Settings Panel
3.  Choose your video from the library

    1. If the video does not exist in the library you can choose a video file to upload. Please note that our platform needs to process your new video which can take up to 5 minutes. After the video is processed, it will be added to the library and you will get a notification on the top right corder.
    2. Once the video is ready, you should repeat steps 1-3.



* **Customize the Logo**

1. Select the Logo layer from the Elements Panel
2. Click on “Replace Image” from Assets Tab of the Settings Panel
3. Here you can drag and drop your logo image, or choose a file to upload.



* **Customize the Text**

1. Select the Text Headline layer from the Elements Panel
2. Double Click the text element to enter edit mode.
3. Now type the text that you would like to use. For this tutorial we are using “Where beauty meets fashion” or any other text you would like.



* **Customize the CTA**

1. Select the Button CTA layer from the Elements Panel
2. From Design Tab of the Settings Panel, you can modify the style for the background, text color, size or round borders.
3. From the Setup Tab of the Settings Panel, you can customize the url for the CTA.&#x20;

{% hint style="danger" %}
Please note that the url set up here for the CTA can be overwritten when generating tags for trafficking.
{% endhint %}

You can modify the position, color or size of the elements from the Settings Panel.

#### **Adding new elements to your ad**

You can add text, images or text elements as needed from the Elements panel by clicking on the Add New Element button, and selecting the type of element you want to add.

#### **Copying your changes from one size to another**

Our recommendation is always to layout your larger size first, and then copy your element’s settings to the smaller sizes, and lastly modify each size as needed to accommodate the elements in the available space. For example, work on the 1920x250 size until it feels ready, then copy the element’s settings to the other smaller sizes like 1280x250 or 970x250.\


How to copy elements settings:

1. Select the element you want to copy styles for
2. Under the element, click on the Copy Settings to Other Sizes
3. Select the sizes that you want to copy the styles to, then click next
4. Select the properties you want to copy
5. Click on Copy Settings



All the settings selected from your element should have been copied to other styles

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcfG3xHWPFO7wXLjAj7q8Dl1zeKdw6QQmXrZAeFtQJ11kjpbkbkH2w5iaaaETM5-Ka4pwKLwOLoPG6LMWbj-aqoUQ_vAFqreYWIXHppdEIK3JR_qt9DwLeCQPlmb-rlvMdeCFmX?key=KMeS6feYljefJJwg0oqdqoMg" alt=""><figcaption><p>How to copy elements settings</p></figcaption></figure>



### Step 7: Save your Ad

Click on the save button at the top of the screen, once it’s saved you can preview your changes, or safely close your browser tab.



### Step 8: Preview your Ad

* Once the ad is saved, click on the Preview button at the top of the screen (next to the save button).

Have a look at the end result of this tutorial here: [In Banner Video Example](https://studio.responsiveads.com/creatives/67d9743c7782ab53666fe17d/preview?#/responsive-all)



***

Want to explore more templates? Head back to the [**Templates Tutorials**]() page and try another design!
