Embed an outstream player (Web Player)
Monetize your site with video ads without the need for video content.
Outstream players are ads-only video players designed to run inside of text article pages without requiring any video content.
If you have limited or no developer resources, you also embed an outstream player through an ad tag or a simple code snippet.
Requirements
Item | Description |
---|---|
Ad tag | (VAST, IMA) You must have an ad tag from your ad server, creative agency, or advertiser. |
JWP licensing | You must have Outstream enabled for your account. |
JWΒ PlayerΒ libraryΒ 8.14.0+ | Outstream player functionality is fully supported only from JWP 8.14.0. |
Configure an outstream player
Use the following steps to configure an outstream player.
-
In the
<head>
of the page, add the player library to the page. -
Within the
<body>
of your page, copy and paste one of the following code snippets.<div id="jwp-outstream-unit"></div> <script> jwplayer("jwp-outstream-unit").setup({ "aspectratio": "16:9", "width": "100%", "advertising": { "client": "vast", "outstream": true } }); </script>
<div id="jwp-outstream-unit"></div> <script> jwplayer("jwp-outstream-unit").setup({ "aspectratio": "16:9", "width": "100%", "advertising": { "client": "googima", "outstream": true } }); </script>
-
Add the URL of the ad tag to
tag
in the advertising object. -
(Optional) To configure the player to gradually close and disappear after the ad plays, add
"endstate": "close"
to theadvertising
object.By default, a gray background without controls remains. You can customize this background with additional elements like an image, logo, or replay button.
-
(Optional) Outside of the
advertising
object, add"displayHeading": "true"
to display an Advertisement heading. -
(Optional) By default, enabling
displayHeading
will use the word βAdvertisement.β This can be changed or variations can be added for different languages.Learn more about automated player localization. Outside of the
advertising
object, addintl.{lang}.displayHeading
to customize thedisplayHeading
text.
Full code samples
<body>
<div id="jwp-outstream-unit"></div>
<script>
jwplayer("jwp-outstream-unit").setup({
"aspectratio": "16:9",
"width": "100%",
"advertising": {
"client": "vast",
"outstream": true,
"tag": "{ad_tag_url}",
"endstate": "close"
},
"displayHeading": true,
"intl": {
"en": {
"displayHeading": "Awesome Ads"
}
},
"floating": {}
});
</script>
</body>
<body>
<div id="jwp-outstream-unit"></div>
<script>
jwplayer("jwp-outstream-unit").setup({
"aspectratio": "16:9",
"width": "100%",
"advertising": {
"client": "googima",
"outstream": true,
"tag": "{ad_tag_url}",
"endstate": "close"
},
"displayHeading": true,
"intl": {
"en": {
"displayHeading": "Awesome Ads"
}
},
"floating": {}
});
</script>
</body>
Additional settings
After implementing the basic Outstream setup, you can customize your implementation with any of these additional properties.
(Global)
For explanations of each property listed below, see: Setup Options or the reference links.
- advertising See: advertising
- aspectratio
- autoPause See: autopause
- controls
- displayHeading
- floating See: floating
- height
- intl
- preloadAds
- repeat
- width
advertising
For explanations of each property listed below, see: advertising.
Property | VAST | IMA |
---|---|---|
bids See: advertising.bids | β | β |
companiondiv See: advertising.companiondiv | β | β |
conditionaladoptout | β | |
creativeTimeout | β | |
forceNonLinearFullSlot | β | |
loadVideoTimeout | β | |
maxRedirects | β | |
preloadAds | β | β |
requestTimeout | β | β |
schedule See: advertising.schedule | β | β |
skipoffset | β | |
vastLoadTimeout | β | |
vpaidcontrols | β | β |
advertising.bids
For an explanation of the property listed below, see: advertising.bids.
Property | VAST | IMA |
---|---|---|
settings See: advertising.bids.settings | β | β |
advertising.bids.settings
For explanations of each property listed below, see: advertising.bids.settings.
Property | VAST | IMA |
---|---|---|
bidTimeoutΒ Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β | β | β |
floorPriceCents | β | β |
floorPriceCurrency | β | β |
advertising.companiondiv
For explanations of each property listed below, see: advertising.companiondiv.
Property | VAST | IMA |
---|---|---|
heightΒ Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β | β | β |
id | β | β |
width | β | β |
advertising.schedule
For explanations of each property listed below, see: advertising.schedule.
Property | VAST | IMA |
---|---|---|
customParamsΒ Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β | β | β |
type | β | β |
vastxml | β | Β |
autoPause
For explanations of each property listed below, see: autoPause.
Property | VAST | IMA |
---|---|---|
viewabilityΒ Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β | β | β |
floating
For explanations of each property listed below, see: floating.
Property | VAST | IMA |
---|---|---|
dismissibleΒ Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β | β | β |
intl.{lang}.advertising
For explanations of each property listed below, see: intl.{lang}.advertising.
Property | VAST | IMA |
---|---|---|
admessageΒ Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β | β | β |
displayHeading | β | β |
podmessage | β | β |
FAQs
Can I use an outstream player with video content?
No, the outstream player is designed to be used without a media file. You should use the regular JWP to create experiences that include video content and advertising.
I have multiple float-on-scroll, outstream players on a single page. What will my viewers experience?
Once a player is minimized and pinned to the screen, the player will remain pinned until it is dismissed. None of the other float-on-scroll players on your page will replace the pinned, minimized player.
A player will only float on scroll only when it is in a playing state.
Why does a gray box remain after an ad has played?
If the player disappears after an ad completes, the adjustment of the page content may cause a negative user experience. Therefore, a gray background persists after an ad has completed.
You can customize this behavior by defining the endstate
property.
jwplayer("myOutstreamElement").setup({
advertising: {
client: "vast",
endstate: "suspended",
outstream: true,
adscheduleid: "00000000",
tag: "https://www.domain.com/myAdTag.xml",
displayHeading: true
}
});
Property | Description |
---|---|
endstate string | Player behavior after all ads within the ad break have played See also: endstate in the advertising object |
Updated 12 months ago