Platform DocsPlayers DocsRelease Notes
System StatusSubmit a CaseDashboard LoginContact Sales

Embed an outstream player (Web Player)

Monetize your site with video ads without the need for video content.

Suggest Edits



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

ItemDescription
Ad tag(VAST, IMA) You must have an ad tag from your ad server, creative agency, or advertiser.
JWP licensingYou 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.

  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>

  3. Add the URL of the ad tag to tag in the advertising object.

  4. (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.

  5. (Optional) Outside of the advertising object, add "displayHeading": "true" to display an Advertisement heading.

  6. (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?

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
  }
});

PropertyDescription
endstate stringPlayer behavior after all ads within the ad break have played

See also: endstate in the advertising object


Updated 6 months ago