Outstream ads are in-feed video ads often placed between articles, paragraphs of text or images on a site. Outstream ads have some of the highest viewability rates as they can be placed anywhere on site and are triggered only when in view. Outstream ads load beautifully across desktop, tablet and mobile – including Android and iOS.
This article will walk you through creating an Outstream Video ad unit.
Example (scroll down page, the video will show once in view): https://demo.adventive.com/outstream/outstream.html
Outstream Video Unit
In the Builder, Create a New File, type in File Name, and select Outstream from the dropdown.
Select ad dimensions or click custom to enter your own.
For the below example we will set the dimensions 640x360.
Backup Image – Any image asset that matches the dimensions you’ve entered will be displayed in the dropdown list. You can select one here or add a backup in the builder under general properties in the “Fallback Image” field. This Backup Image will be displayed if the user’s browser is out of date and cannot support HTML5.
Click URL – The default click URL. The click URL is automatically applied to any area of the ad unit without an associated click or event action (i.e. buttons, hitboxes, expand actions etc.). Users that click on the fallback image will also be directed to this URL.
Setting Up Your Canvas
A blank canvas with a video placeholder will load onto the screen including a "LEARN MORE" button in the Top Left:
Click off of the Video placeholder to see the General Canvas Properties:
Ad Properties (In the Properties panel to the right of the Builder)
Width and Height
The Width and Height of your canvas will be the sizes you choose from the Create New File template. You can change these at any time.
Opacity of the ad canvas
If selected, it will auto-scale your ad unit (excluding Wallpapers) according to the browser dimensions of the user. If you have several screens, be sure to select this for each screen. * If the ad format is already a fully responsive format, this box will not appear as the format will automatically be responsive.
Click to change or update the name of your ad
Default Click URL
Click to change or update the default click URL
UPDATE: You can now choose to have the Default Url open in a “New Tab” or the “Same Tab” by clicking on the dropdown arrow next to the “Open In” field in General Properties:
Click to add or update your fallback image. This will open your assets, displaying only images that are identically sized to the initial load screen dimensions of your ad unit.
Border Size – border size in pixels
Border Color – you can choose a color by clicking in the box
Fill Color – you can click on the box and choose a fill color
Gradient, you can Choose a Gradient Color and Rotation – set gradient color and rotation
* New: Color Picker - once you click in the Border Color or Fill Color box - you can select a color, type in the hex number, or click in the white rectangle/bottom left to bring up the color picker:
Select the color picker icon and place it over any area in the builder of the color you wish to select. The info and object selected will change to the color of what you have selected to match.
Next, click on the Video placeholder and go to the Video Settings to the Right in General Properties. Once your Video is on the canvas and selected, make any sizing adjustments, then go back to the Video Component settings and you will see the default settings which can be changed (See Video Component for all settings HERE):
In our example we uploaded an MP4 video:
In our examples, we changed some of the Video Build and Settings:
- Select Chromeless, then enable Player Controls, and uncheck Show Play Button (Mute controls will be selected by default so sound can be user initiated).
- Under Settings, Keep Autoplay and “In view” checked:
The Actions menu will show "Video Complete" as the default for "Action On" with the action set to "Close Ad" on Video Complete:
Select the "Learn More" button, go to the Action section under General Properties to the right of the builder to select an action or change the Text (or you can delete the Learn More button):
If you want the ad to be responsive – be sure to check “Responsive” under General Properties:
Save the ad.
Go to the Preview icon to view the ad.