Embed an outstream 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.

📘

TIP

If you have limited or no developer resources, you also embed an outstream player through an ad tag or a simple code snippet.


Requirements

ItemDescription
Ad tag(VAST, IMA) You must have an ad tag from your ad server, creative agency, or advertiser.
JW Player licensingYou must have Outstream enabled for your account and one of the following licenses:

Enterprise
Developer
JW Player library 8.14.0+Outstream player functionality is fully supported only from JW Player 8.14.0.


Configure an outstream player

Use the following steps to configure an outstream player.

  1. In the <head> of the page, add the player library to the page.
  2. 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>

  1. Add the URL of the ad tag to tag in the advertising object.
  2. (Optional) To configure the player to gradually close and disappear after the ad plays, add "endstate": "close" to the advertising object.

    By default, a gray background without controls remains. You can customize this background with additional elements like an image, logo, or replay button.

  3. (Optional) Outside of the advertising object, add "displayHeading": "true" to display an Advertisement heading.
  4. (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, add intl.{lang}.displayHeading to customize the displayHeading 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.

PropertyVASTIMA
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.

PropertyVASTIMA
settings
See: advertising.bids.settings

advertising.bids.settings

For explanations of each property listed below, see: advertising.bids.settings.

PropertyVASTIMA
bidTimeout                           
floorPriceCents
floorPriceCurrency

advertising.companiondiv

For explanations of each property listed below, see: advertising.companiondiv.

PropertyVASTIMA
height                                    
id
width

advertising.schedule

For explanations of each property listed below, see: advertising.schedule.

PropertyVASTIMA
customParams                     
type
vastxml 

autoPause

For explanations of each property listed below, see: autoPause.

PropertyVASTIMA
viewability                            

floating

For explanations of each property listed below, see: floating.

PropertyVASTIMA
dismissible                           

intl.{lang}.advertising

For explanations of each property listed below, see: intl.{lang}.advertising.

PropertyVASTIMA
admessage                           
displayHeading
podmessage


FAQs

Can I use an outstream player with video content?
I have multiple float-on-scroll, outstream players on a single page. What will my viewers experience?
Why does a gray box remain after an ad has played?



Did this page help you?