@ampproject/amp-jwplayer v1.2110011758.0
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
example preview="top-frame" playground="false"
Install via npm:
npm install @ampproject/bento-jwplayerimport '@ampproject/bento-jwplayer';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.
example preview="top-frame" playground="false"
<head>
<script src="https://cdn.ampproject.org/custom-elements-polyfill.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 data-bento-boilerplate>
amp-jwplayer {
display: block;
overflow: hidden;
position: relative;
}
/* Pre-upgrade: size-defining element - hide children. */
amp-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
example preview="top-frame" playground="false"
Install via npm:
npm install @ampproject/bento-jwplayerimport React from 'react';
import { BentoMathml } from '@ampproject/bento-jwplayer/react';
import '@ampproject/bento-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: '300px', height: '100px'}}>
...
</BentoMathml>Or via className:
<BentoMathml className='custom-styles'>
...
</BentoMathml>.custom-styles {
background-color: red;
width: '300px';
height: '100px';
}Props
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago