Bento

Bento Jwplayer

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.css"
    />
    <style>
      body {
        background: #ecf1f3;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
</head>

<body>

    <bento-jwplayer
      id="jwplayer"
      data-player-id="BjcwyK37"
      data-media-id="CtaIzmFs"
      style="width: 480px; height: 270px"
    ></bento-jwplayer>
</body>

Displays a cloud-hosted JW Player in an iframe.

Use bento-jwplayer as a web component or a React functional component:

↓ Web Component ↓ React / Preact

Web Component

You must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See Layout and style.

Import via npm

npm install @bentoproject/jwplayer
import {defineElement as defineBentoJwplayer} from '@bentoproject/jwplayer';
defineBentoJwplayer();

Include via <script>

<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.css" crossorigin="anonymous">

Example

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.css"
    />
</head>

<body>

<bento-jwplayer
      id="jwplayer"
      data-player-id="BjcwyK37"
      data-media-id="CtaIzmFs"
      style="width: 480px; height: 270px"
    ></bento-jwplayer>
</body>

Interactivity and API usage

Bento components are highly interactive through their API. The bento-jwplayer component API is accessible by including the following script tag in your document:

await customElements.whenDefined('bento-jwplayer');
const jwplayerApi = await document.querySelector('bento-jwplayer').getApi();

You can use the API to trigger the available actions (play, pause, mute, unmute, requestFullscreen):

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.css"
    />
</head>

<body>

<bento-jwplayer
      id="jwplayer"
      data-player-id="BjcwyK37"
      data-media-id="CtaIzmFs"
      style="width: 480px; height: 270px"
    ></bento-jwplayer>

    <script>
      (async () => {
        const player = document.querySelector('#jwplayer');
        await customElements.whenDefined('bento-jwplayer');

        const api = player.getApi();
        api.play();
        api.pause();
        api.mute();
        api.unmute();
        api.requestFullscreen();
      })();
    </script>
</body>

Layout and style

Each Bento component has a small CSS library you must include to guarantee proper loading without content shifts. Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.css"
/>

Alternatively, you may also make the light-weight pre-upgrade styles available inline:

<style>
  bento-jwplayer {
    display: block;
    overflow: hidden;
    position: relative;
  }

  /* Pre-upgrade: size-defining element - hide children. */
  bento-jwplayer:not(.i-amphtml-built)
    > :not([placeholder]):not([slot='i-amphtml-svc']) {
    display: none;
    content-visibility: hidden;
  }
</style>

Attributes

data-player-idJW Platform player id. This is an 8-digit alphanumeric sequence that can be found in the Players section in your JW Player Dashboard. (Required)
data-media-idThe JW Platform media id. This is an 8-digit alphanumeric sequence that can be found in the Content section in your JW Player Dashboard. (Required if data-playlist-id is not defined.). Note: outstream is also a valid value.
data-playlist-idThe JW Platform playlist id. This is an 8-digit alphanumeric sequence that can be found in the Playlists section in your JW Player Dashboard. If both data-playlist-id and data-media-id are specified, data-playlist-id takes precedence. (Required if data-media-id is not defined.)
data-content-searchDenotes the type of the playlist. If contextual article matching is desired, use the value `__CONTEXTUAL__`. If a search playlist is desired, input a keyword or phrase used to generate the search playlist.
data-content-backfillEnsures that a search or contextual playlist always returns a result. If there are no relevant results for the given query, this parameter ensures that a list of trending videos are served instead. (Boolean with default: true)
data-player-querystringA querystring of parameters that will be added to the player iframe src. This can be used for things like token signing.
data-player-param-*An attribute that will be added as a query parameter to the player iframe src.

Keys and values will be URI encoded. Keys will be camel cased.
  • data-player-param-token="abc" becomes &token=abc
  • data-player-param-custom-data="key:value;key2:value2" becomes &customData=key%3Avalue%3Bkey2%3Avalue2
An alternative to using data-player-querystring.
data-ad-cust-paramsA JSON string of custom parameters to add to ad tags.
data-ad-cust-params='{
      "key1": "value"
    }'
data-ad-macro-*An attribute used to override the default value of macros in ad tags. Supported macros include:
  • domain
  • referrer
  • page-url
  • item-{custparam}
  • item-{custparam}-list
data-ad-macro-domain="jwplayer.com" would instead substitute "jwplayer.com" in for the __domain__ macro.

See JW Player's Ad Tag Targeting Macros for more information.
data-config-plugin-urlA url string used to pass external JS plugins to the player.
data-config-skin-urlA url string used to pass external CSS skins to the player. See JW Player's CSS Skin Reference for more information.
data-config-jsonA JSON string of a player config. This can be used to set specific configuration properties on the player.
data-config-json='{"playbackRateControls":true,"displaytitle":false}'
Advertising configurations can also be specified using this.
data-config-json='{
      "advertising": {
        "client": "vast",
        "schedule": [
          {
            "tag": "http://adserver.com/vastTag.xml",
            "offset": "pre"
          }
        ]
      }
    }'
Media and Float on Scroll properties cannot be configured with this attribute. Update media properties in your JW Player Dashboard. See JW Player's Player Configuration Reference for more information.
autoplayIf this attribute is present, and the browser supports autoplay, the video will be automatically played as soon as it becomes visible. There are some conditions that the component needs to meet to be played, which are outlined in the Video in AMP spec.
dockRequires amp-video-docking extension. If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
For more details, see documentation on the docking extension itself.

Styling

You may use the bento-jwplayer element selector to style the accordion freely.

Preact/React Component

Import via npm

npm install @bentoproject/jwplayer
import React from 'react';
import {BentoMathml} from '@bentoproject/jwplayer/react';
import '@bentoproject/jwplayer/styles.css';

function App() {
  return (
    <BentoJwplayer
      playerId={'uoIbMPm3'}
      mediaId={'BZ6tc0gy'}
      style={{width: 480, height: 270}}
      {...args}
    ></BentoJwplayer>
  );
}

Layout and style

Container type

The BentoMathml component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with height, width, aspect-ratio, or other such properties). These can be applied inline:

<BentoMathml style={{width: 300, height: 100}}>...</BentoMathml>

Or via className:

<BentoMathml className="custom-styles">...</BentoMathml>
.custom-styles {
  background-color: red;
  width: '300px';
  height: '100px';
}

Props

playerIdJW Platform player id. This is an 8-digit alphanumeric sequence that can be found in the Players section in your JW Player Dashboard. (Required)
mediaIdThe JW Platform media id. This is an 8-digit alphanumeric sequence that can be found in the Content section in your JW Player Dashboard. (Required if playlistId is not defined.). Note: outstream is also a valid value.
playlistIdThe JW Platform playlist id. This is an 8-digit alphanumeric sequence that can be found in the Playlists section in your JW Player Dashboard. If both playlistId and mediaId are specified, playlist-id takes precedence. (Required if media-id is not defined.)
contentSearchDenotes the type of the playlist. If a search playlist is desired, input a keyword or phrase used to generate the search playlist.
contentBackfillEnsures that a search or contextual playlist always returns a result. If there are no relevant results for the given query, this parameter ensures that a list of trending videos are served instead. (Boolean with default: true)
queryParamsA object of keys and values that should be appended to the player iframe src. This can be used for things like token signing. Keys and values will be URI encoded. Keys will be camel cased.
  • player-param-token="abc" becomes &token=abc
  • player-param-custom-data="key:value;key2:value2" becomes &customData=key%3Avalue%3Bkey2%3Avalue2
adCustParamsA JSON string of custom parameters to add to ad tags.
adCustParams={JSON.stringify({key1: "value"})}
adMacrosA property used to override the default value of macros in ad tags. Supported macros include:
  • domain
  • referrer
  • page-url
  • item-{custparam}
  • item-{custparam}-list
ad-macro-domain="jwplayer.com" would instead substitute "jwplayer.com" in for the __domain__ macro.

See JW Player's Ad Tag Targeting Macros for more information.
configAn object to pass through various bits of configuration. Accepts A skinUrl string used to pass external CSS skins to the player. See JW Player's CSS Skin Reference for more information. Accepts a pluginUrl string used to pass external JS plugins to the player. Accepts a json property with a JSON string of a player config. This can be used to set specific configuration properties on the player. Advertising configurations can also be specified using this. ```javascript config={{ skinUrl: 'https://playertest.longtailvideo.com/skins/ethan.css', pluginUrl: 'https://playertest.longtailvideo.com/plugins/newsticker.js', json: { playbackRateControls: true, displaytitle: false, advertising: { client: "vast", schedule: [ { tag: "http://adserver.com/vastTag.xml", offset: "pre" } ] } } }} ``` Media and Float on Scroll properties cannot be configured with this attribute. Update media properties in your JW Player Dashboard. See JW Player's Player Configuration Reference for more information.
autoplayIf this attribute is present, and the browser supports autoplay, the video will be automatically played as soon as it becomes visible. There are some conditions that the component needs to meet to be played, which are outlined in the Video in AMP spec.
dockRequires amp-video-docking extension. If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
For more details, see documentation on the docking extension itself.
We serve cookies on this site to analyze traffic and optimize your experience.
More details