@bentoproject/jwplayer NPM

Bento Jwplayer

Usage

Displays a cloud-hosted JW Player in an iframe.

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.

The examples below demonstrate use of the <bento-jwplayer> web component.

Example: Import via npm

Install via npm:

npm install @bentoproject/jwplayer

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

Example: Include via `<script>`

The example below contains an bento-jwplayer with three sections. The expanded attribute on the third section expands it on page load.

<head>
  <script src="https://cdn.ampproject.org/bento.js"></script>
  <script
    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 twitter = document.querySelector('#jwplayer');
      await customElements.whenDefined('bento-twitter');

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

Interactivity and API usage

Bento enabled components in standalone use 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-accordion');
const api = await document.querySelector('bento-accordion').getApi();

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

Styling

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

Preact/React Component

The examples below demonstrates use of the <BentoMathml> as a functional component usable with the Preact or React libraries.

Example: Import via npm

Install 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

@bentoproject/core

@infinitebrahmanuniverse/nolb-_ben @everything-registry/sub-chunk-121 @zalastax/nolb-_ben

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

Bento Jwplayer

Usage

Web Component

Example: Import via npm

Example: Include via <script>

Interactivity and API usage

Layout and style

Attributes

Styling

Preact/React Component

Example: Import via npm

Layout and style

Props

Example: Include via `<script>`