{"_id":"@ampproject/amp-jwplayer","_rev":"10-ecea4dd596c302e606c1f99b1a3e0c11","name":"@ampproject/amp-jwplayer","dist-tags":{"nightly":"1.2110252343.0","latest":"1.2110011758.0"},"versions":{"1.2110181554.0":{"name":"@ampproject/amp-jwplayer","version":"1.2110181554.0","description":"AMP HTML amp-jwplayer Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-jwplayer/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-jwplayer/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-jwplayer@1.2110181554.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-3fnTGIL9baq4cwwjgmzneuALWunL5C+Y7ZWOc1iuTgfFya6M86aHUmNNC/EY8/FJ9h22SA7VQ1ZyVtf5FmKZyg==","shasum":"93dd14d8cbcdd6bd43c89a8c501fd1a82048c4fc","tarball":"https://registry.npmjs.org/@ampproject/amp-jwplayer/-/amp-jwplayer-1.2110181554.0.tgz","fileCount":19,"unpackedSize":1059421,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHVXjRDy1S015qqORVbOuCkW89CuIZTk2WkEiuljyss4AiAun2rwKNOuLeHmr2I3Yi8N4HAoG29dj9dw48PzoqtYUQ=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-jwplayer_1.2110181554.0_1634644411532_0.5755513154503398"},"_hasShrinkwrap":false},"1.2110082201.1":{"name":"@ampproject/amp-jwplayer","version":"1.2110082201.1","description":"AMP HTML amp-jwplayer Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-jwplayer/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-jwplayer/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-jwplayer@1.2110082201.1","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-NbAQrL85akY0pXHeMLf9YY6ml/eXLVYbgN7p7zRT6F3lDzSKK4c4ehRSpuuP9EA7w1DWWysC/RjKE8e6lM5SwA==","shasum":"41f51b12225e3729adf54b34980e92c726ac0190","tarball":"https://registry.npmjs.org/@ampproject/amp-jwplayer/-/amp-jwplayer-1.2110082201.1.tgz","fileCount":19,"unpackedSize":1059421,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA44Vm3dN0BoU4UwyI5sqBOvQ/+I1+9k827pbMhhp+qaAiEAsYkXN4vlUXEqFO2LebTo+E0oXMjgm4uWVJH/glGzNQA="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-jwplayer_1.2110082201.1_1634664086757_0.8804021244893667"},"_hasShrinkwrap":false},"1.2110192227.0":{"name":"@ampproject/amp-jwplayer","version":"1.2110192227.0","description":"AMP HTML amp-jwplayer Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-jwplayer/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-jwplayer/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Jwplayer\n\n## Usage\n\nDisplays a cloud-hosted JW Player in an iframe.\n\n### Web Component\n\nYou 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](#layout-and-style).\n\nThe examples below demonstrate use of the `` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-jwplayer\n```\n\n```javascript\nimport '@ampproject/bento-jwplayer';\n```\n\n[/example]\n\n#### Example: Include via `\n \n \n\n\n \n\n \n\n\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento 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:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await document.querySelector('bento-accordion').getApi();\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### Attributes\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
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.\n
\n
\n Keys and values will be URI encoded. Keys will be camel cased.\n
    \n
  • data-player-param-token=\"abc\" becomes &token=abc
    • \n
  • data-player-param-custom-data=\"key:value;key2:value2\" becomes &customData=key%3Avalue%3Bkey2%3Avalue2
    • \n
\n An alternative to using data-player-querystring.\n
data-ad-cust-paramsA JSON string of custom parameters to add to ad tags.\n 
data-ad-cust-params='{\n      \"key1\": \"value\"\n    }'\n
\n
data-ad-macro-*An attribute used to override the default value of macros in ad tags. Supported macros include:\n
    \n
  • domain
    • \n
  • referrer
    • \n
  • page-url
    • \n
  • item-{custparam}
    • \n
  • item-{custparam}-list
    • \n
\n data-ad-macro-domain=\"jwplayer.com\" would instead substitute \"jwplayer.com\" in for the __domain__ macro.\n
\n
\n 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.\n 
data-config-json='{\"playbackRateControls\":true,\"displaytitle\":false}'\n
\n Advertising configurations can also be specified using this.\n 
data-config-json='{\n      \"advertising\": {\n        \"client\": \"vast\",\n        \"schedule\": [\n          {\n            \"tag\": \"http://adserver.com/vastTag.xml\",\n            \"offset\": \"pre\"\n          }\n        ]\n      }\n    }'\n
\n 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.\n
\n For more details, see documentation on the docking extension itself.
\n\n#### Styling\n\nYou may use the `bento-jwplayer` element selector to style the accordion freely.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-jwplayer\n```\n\n```javascript\nimport React from 'react';\nimport { BentoMathml } from '@ampproject/bento-jwplayer/react';\nimport '@ampproject/bento-jwplayer/styles.css';\n\nfunction App() {\n return (\n \n );\n}\n```\n\n[/example]\n\n#### Layout and style\n\n**Container type**\n\nThe `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:\n\n```jsx\n\n ...\n\n```\n\nOr via `className`:\n\n```jsx\n\n ...\n\n```\n\n```css\n.custom-styles {\n background-color: red;\n width: '300px';\n height: '100px';\n}\n```\n\n#### Props\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
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.\n
    \n
  • player-param-token=\"abc\" becomes &token=abc
    • \n
  • player-param-custom-data=\"key:value;key2:value2\" becomes &customData=key%3Avalue%3Bkey2%3Avalue2
    • \n
\n
adCustParamsA JSON string of custom parameters to add to ad tags.\n 
adCustParams={JSON.stringify({key1: \"value\"})}
\n
adMacrosA property used to override the default value of macros in ad tags. Supported macros include:\n
    \n
  • domain
    • \n
  • referrer
    • \n
  • page-url
    • \n
  • item-{custparam}
    • \n
  • item-{custparam}-list
    • \n
\n ad-macro-domain=\"jwplayer.com\" would instead substitute \"jwplayer.com\" in for the __domain__ macro.\n
\n
\n See JW Player's Ad Tag Targeting Macros for more information.
configAn object to pass through various bits of configuration.\n Accepts A skinUrl string used to pass external CSS skins to the player. See JW Player's CSS Skin Reference for more information.\n Accepts a pluginUrl string used to pass external JS plugins to the player.\n 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.\n 
config={{\n      skinUrl: 'https://playertest.longtailvideo.com/skins/ethan.css',\n      pluginUrl: 'https://playertest.longtailvideo.com/plugins/newsticker.js',\n      json: {\n        playbackRateControls: true,\n        displaytitle: false,\n        advertising: {\n          client: \"vast\",\n          schedule: [\n            {\n              tag: \"http://adserver.com/vastTag.xml\",\n              offset: \"pre\"\n            }\n          ]\n        }\n      }\n    }}\n
\n 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.\n
\n For more details, see documentation on the docking extension itself.
\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-jwplayer@1.2110192227.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-Z+iNz0EnZRy1xXgFuMNw7yzDsVFgi6TiDIN5M8zBK0bAEWLb6kCpA1WwfoTa3GBkf0oixp06zh0mZ97bwQH2gA==","shasum":"de33616c9a537a65d2370c2fe697620b07e68e1f","tarball":"https://registry.npmjs.org/@ampproject/amp-jwplayer/-/amp-jwplayer-1.2110192227.0.tgz","fileCount":19,"unpackedSize":1059421,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDoFjNjPHDdZv9VkSz3L4juH5aLc6jmq0NcSW6efvZGdAiARI30/n+jxkwDU0zp/P8+AfUG9xfehRwXO3fh32Qn5Hg=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-jwplayer_1.2110192227.0_1634729979401_0.8452675368085525"},"_hasShrinkwrap":false},"1.2110082201.2":{"name":"@ampproject/amp-jwplayer","version":"1.2110082201.2","description":"AMP HTML amp-jwplayer Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-jwplayer/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-jwplayer/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-jwplayer@1.2110082201.2","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-UVsRMYRi7C3Gx6Pylq4j/w7lT+yp2t0nfPnLhmJveOKCCaYXSlyc3jw0d2QjeBS/lE7BvBujgNnvluxHEpJcXQ==","shasum":"2c333c4fcf557d527d8016b05acf54fbcae5b4d3","tarball":"https://registry.npmjs.org/@ampproject/amp-jwplayer/-/amp-jwplayer-1.2110082201.2.tgz","fileCount":19,"unpackedSize":1059421,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEmjpY4uf5dc/beVk7q3wpwDg0VnzN6e1jt5KFKeGAbfAiAaEuuFDYn5HO1Yap8Ybo7Z+f98PxnhY6oRJcNu96LLuw=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-jwplayer_1.2110082201.2_1634768107217_0.8020622648721443"},"_hasShrinkwrap":false},"1.2110202310.0":{"name":"@ampproject/amp-jwplayer","version":"1.2110202310.0","description":"AMP HTML amp-jwplayer Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-jwplayer/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-jwplayer/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Jwplayer\n\n## Usage\n\nDisplays a cloud-hosted JW Player in an iframe.\n\n### Web Component\n\nYou 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](#layout-and-style).\n\nThe examples below demonstrate use of the `` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-jwplayer\n```\n\n```javascript\nimport '@ampproject/bento-jwplayer';\n```\n\n[/example]\n\n#### Example: Include via `\n \n \n\n\n \n\n \n\n\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento 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:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await document.querySelector('bento-accordion').getApi();\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### Attributes\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
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.\n
\n
\n Keys and values will be URI encoded. Keys will be camel cased.\n
    \n
  • data-player-param-token=\"abc\" becomes &token=abc
    • \n
  • data-player-param-custom-data=\"key:value;key2:value2\" becomes &customData=key%3Avalue%3Bkey2%3Avalue2
    • \n
\n An alternative to using data-player-querystring.\n
data-ad-cust-paramsA JSON string of custom parameters to add to ad tags.\n 
data-ad-cust-params='{\n      \"key1\": \"value\"\n    }'\n
\n
data-ad-macro-*An attribute used to override the default value of macros in ad tags. Supported macros include:\n
    \n
  • domain
    • \n
  • referrer
    • \n
  • page-url
    • \n
  • item-{custparam}
    • \n
  • item-{custparam}-list
    • \n
\n data-ad-macro-domain=\"jwplayer.com\" would instead substitute \"jwplayer.com\" in for the __domain__ macro.\n
\n
\n 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.\n 
data-config-json='{\"playbackRateControls\":true,\"displaytitle\":false}'\n
\n Advertising configurations can also be specified using this.\n 
data-config-json='{\n      \"advertising\": {\n        \"client\": \"vast\",\n        \"schedule\": [\n          {\n            \"tag\": \"http://adserver.com/vastTag.xml\",\n            \"offset\": \"pre\"\n          }\n        ]\n      }\n    }'\n
\n 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.\n
\n For more details, see documentation on the docking extension itself.
\n\n#### Styling\n\nYou may use the `bento-jwplayer` element selector to style the accordion freely.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-jwplayer\n```\n\n```javascript\nimport React from 'react';\nimport { BentoMathml } from '@ampproject/bento-jwplayer/react';\nimport '@ampproject/bento-jwplayer/styles.css';\n\nfunction App() {\n return (\n \n );\n}\n```\n\n[/example]\n\n#### Layout and style\n\n**Container type**\n\nThe `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:\n\n```jsx\n\n ...\n\n```\n\nOr via `className`:\n\n```jsx\n\n ...\n\n```\n\n```css\n.custom-styles {\n background-color: red;\n width: '300px';\n height: '100px';\n}\n```\n\n#### Props\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
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.\n
    \n
  • player-param-token=\"abc\" becomes &token=abc
    • \n
  • player-param-custom-data=\"key:value;key2:value2\" becomes &customData=key%3Avalue%3Bkey2%3Avalue2
    • \n
\n
adCustParamsA JSON string of custom parameters to add to ad tags.\n 
adCustParams={JSON.stringify({key1: \"value\"})}
\n
adMacrosA property used to override the default value of macros in ad tags. Supported macros include:\n
    \n
  • domain
    • \n
  • referrer
    • \n
  • page-url
    • \n
  • item-{custparam}
    • \n
  • item-{custparam}-list
    • \n
\n ad-macro-domain=\"jwplayer.com\" would instead substitute \"jwplayer.com\" in for the __domain__ macro.\n
\n
\n See JW Player's Ad Tag Targeting Macros for more information.
configAn object to pass through various bits of configuration.\n Accepts A skinUrl string used to pass external CSS skins to the player. See JW Player's CSS Skin Reference for more information.\n Accepts a pluginUrl string used to pass external JS plugins to the player.\n 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.\n 
config={{\n      skinUrl: 'https://playertest.longtailvideo.com/skins/ethan.css',\n      pluginUrl: 'https://playertest.longtailvideo.com/plugins/newsticker.js',\n      json: {\n        playbackRateControls: true,\n        displaytitle: false,\n        advertising: {\n          client: \"vast\",\n          schedule: [\n            {\n              tag: \"http://adserver.com/vastTag.xml\",\n              offset: \"pre\"\n            }\n          ]\n        }\n      }\n    }}\n
\n 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.\n
\n For more details, see documentation on the docking extension itself.
\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-jwplayer@1.2110202310.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-ZgLj6pEYR6rc8WDiwdVQke8O4/O5jpn9XAQ3r+3nCx+Qa0thi7UqSZxHflX52eE9TB515+XXy/J+4M52xUmo3g==","shasum":"9310766cf454179e014299b38be5a4ac7084bb0e","tarball":"https://registry.npmjs.org/@ampproject/amp-jwplayer/-/amp-jwplayer-1.2110202310.0.tgz","fileCount":19,"unpackedSize":1059408,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDWBvoW5+pNecqbqPIp4Jm6cXuos1ZHFS1djNB721wovAiEAjGJV4/csYWHxtgz3FWH+u/WJ2u2OKCFKgZsvwcJctuo="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-jwplayer_1.2110202310.0_1634815547015_0.4490663830021935"},"_hasShrinkwrap":false},"1.2110212130.0":{"name":"@ampproject/amp-jwplayer","version":"1.2110212130.0","description":"AMP HTML amp-jwplayer Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-jwplayer/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-jwplayer/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Jwplayer\n\n## Usage\n\nDisplays a cloud-hosted JW Player in an iframe.\n\n### Web Component\n\nYou 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](#layout-and-style).\n\nThe examples below demonstrate use of the `` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-jwplayer\n```\n\n```javascript\nimport '@ampproject/bento-jwplayer';\n```\n\n[/example]\n\n#### Example: Include via `\n \n \n\n\n \n\n \n\n\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento 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:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await document.querySelector('bento-accordion').getApi();\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### Attributes\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
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.\n
\n
\n Keys and values will be URI encoded. Keys will be camel cased.\n
    \n
  • data-player-param-token=\"abc\" becomes &token=abc
    • \n
  • data-player-param-custom-data=\"key:value;key2:value2\" becomes &customData=key%3Avalue%3Bkey2%3Avalue2
    • \n
\n An alternative to using data-player-querystring.\n
data-ad-cust-paramsA JSON string of custom parameters to add to ad tags.\n 
data-ad-cust-params='{\n      \"key1\": \"value\"\n    }'\n
\n
data-ad-macro-*An attribute used to override the default value of macros in ad tags. Supported macros include:\n
    \n
  • domain
    • \n
  • referrer
    • \n
  • page-url
    • \n
  • item-{custparam}
    • \n
  • item-{custparam}-list
    • \n
\n data-ad-macro-domain=\"jwplayer.com\" would instead substitute \"jwplayer.com\" in for the __domain__ macro.\n
\n
\n 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.\n 
data-config-json='{\"playbackRateControls\":true,\"displaytitle\":false}'\n
\n Advertising configurations can also be specified using this.\n 
data-config-json='{\n      \"advertising\": {\n        \"client\": \"vast\",\n        \"schedule\": [\n          {\n            \"tag\": \"http://adserver.com/vastTag.xml\",\n            \"offset\": \"pre\"\n          }\n        ]\n      }\n    }'\n
\n 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.\n
\n For more details, see documentation on the docking extension itself.
\n\n#### Styling\n\nYou may use the `bento-jwplayer` element selector to style the accordion freely.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-jwplayer\n```\n\n```javascript\nimport React from 'react';\nimport { BentoMathml } from '@ampproject/bento-jwplayer/react';\nimport '@ampproject/bento-jwplayer/styles.css';\n\nfunction App() {\n return (\n \n );\n}\n```\n\n[/example]\n\n#### Layout and style\n\n**Container type**\n\nThe `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:\n\n```jsx\n\n ...\n\n```\n\nOr via `className`:\n\n```jsx\n\n ...\n\n```\n\n```css\n.custom-styles {\n background-color: red;\n width: '300px';\n height: '100px';\n}\n```\n\n#### Props\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
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.\n
    \n
  • player-param-token=\"abc\" becomes &token=abc
    • \n
  • player-param-custom-data=\"key:value;key2:value2\" becomes &customData=key%3Avalue%3Bkey2%3Avalue2
    • \n
\n
adCustParamsA JSON string of custom parameters to add to ad tags.\n 
adCustParams={JSON.stringify({key1: \"value\"})}
\n
adMacrosA property used to override the default value of macros in ad tags. Supported macros include:\n
    \n
  • domain
    • \n
  • referrer
    • \n
  • page-url
    • \n
  • item-{custparam}
    • \n
  • item-{custparam}-list
    • \n
\n ad-macro-domain=\"jwplayer.com\" would instead substitute \"jwplayer.com\" in for the __domain__ macro.\n
\n
\n See JW Player's Ad Tag Targeting Macros for more information.
configAn object to pass through various bits of configuration.\n Accepts A skinUrl string used to pass external CSS skins to the player. See JW Player's CSS Skin Reference for more information.\n Accepts a pluginUrl string used to pass external JS plugins to the player.\n 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.\n 
config={{\n      skinUrl: 'https://playertest.longtailvideo.com/skins/ethan.css',\n      pluginUrl: 'https://playertest.longtailvideo.com/plugins/newsticker.js',\n      json: {\n        playbackRateControls: true,\n        displaytitle: false,\n        advertising: {\n          client: \"vast\",\n          schedule: [\n            {\n              tag: \"http://adserver.com/vastTag.xml\",\n              offset: \"pre\"\n            }\n          ]\n        }\n      }\n    }}\n
\n 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.\n
\n For more details, see documentation on the docking extension itself.
\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-jwplayer@1.2110212130.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-T3Fw3Bgf/JlD0UBqRgO0BrpjmViNIH15mQnl9d/e78cVscGUBKpP3xMNOiQXB/AJn3qIDkfC7JmvizFidcm7LA==","shasum":"cbcb0aabfbbd5bd5c8dcf1c0908b43a61ad30ec0","tarball":"https://registry.npmjs.org/@ampproject/amp-jwplayer/-/amp-jwplayer-1.2110212130.0.tgz","fileCount":27,"unpackedSize":3108347,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBNUJ4saF6DiUJzw9LDOdq26iZKWyQYX3LLFgpF6ids2AiBM63VrjoLzBHH+ZTaCq+wTrSzXjDbrF2dHvjcxco+mtw=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-jwplayer_1.2110212130.0_1634902270215_0.08367808253965325"},"_hasShrinkwrap":false},"1.2110011758.0":{"name":"@ampproject/amp-jwplayer","version":"1.2110011758.0","description":"AMP HTML amp-jwplayer Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-jwplayer/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-jwplayer/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-jwplayer@1.2110011758.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-8a0VVfOG/EkNniT5OdSwh8aEKl+IIu4xWl6j5eVXWCFuHrY9VGCoI6eOX7pMPlXR9nsfZZzaYrBDIRtPWP+qMQ==","shasum":"043500e179c0fa47141f829280055b521282999f","tarball":"https://registry.npmjs.org/@ampproject/amp-jwplayer/-/amp-jwplayer-1.2110011758.0.tgz","fileCount":27,"unpackedSize":3108347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzFRaCRA9TVsSAnZWagAACn4P/RvKMlzHkZ2WWIPxgBFO\nThqEEAnyuSyreTtSXq3qtvPWrDp9i9t1eLS5sKYn0KbbONeJTJ5smzPHTj3Z\n5vGnhT6hBkhHwcEetHoQepml/qvGuaqGZzaAMrvRJfl1SKv8a8/owd0wwojs\nRrPBqMBW14iMAHqHxxS6YzVHMQW3Aov46uhvmIJ3Olj03MaFHnWjRYKofD0I\nAYWRjw5YQGcgLtMhu9pB51sE1ZnERfjA6YzB2HQts8b4BS3XM+hd+5N3+zBC\nc5fwTI2oNgVI2LGA0m2bMNfe93lwXdIYWnIXTOEBjIG30JfZUF1XI4/7W5wq\nG4mVwyBhZTlOPb8/wB2B+/Lb/ojm25nDIx97ao0fLDvBu2Q045+mUO5X0ENd\nDnz/cn3rqIXhXho59/V2+VM+ZxzODUFeVTmm8LKGGRlWnUjQh6orCw76Hggc\nntuoNT+aUK0sDtdJrkd3mIfkIo6Na1C6pKf8QFSOmmlWEQkvNCmA+62XqNnp\nnD9fKEDp+aJv9BYCtZ+rmpmCFjyEJTNBSKC8Ze4+R+3VR+Z3VWvvu6XIw8Sd\neMs3pefy9kO0OHpCYztz8y5MuCKmkMFcnZHnFRfsfCdmKYQTY7HomfD69JzZ\nx2H7GhtVybnhZS0NutRhmzVjLVa726l9wQ0vuT3m5mNjQO/BKO0krb+L3UoM\nvoe+\r\n=fH0v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMGXXVi760k4iYJcEepUY+Xuu1gkUFCSCz0imV+KShDgIgfaZ3vTxZ2nK3qH3jpLhlLFg8wwaSm47VGG2CQOtKfa8="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-jwplayer_1.2110011758.0_1634937717764_0.04122835321087526"},"_hasShrinkwrap":false,"deprecated":"See @bentoproject/jwplayer"},"1.2110252343.0":{"name":"@ampproject/amp-jwplayer","version":"1.2110252343.0","description":"AMP HTML amp-jwplayer Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-jwplayer/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-jwplayer/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Jwplayer\n\n## Usage\n\nDisplays a cloud-hosted JW Player in an iframe.\n\n### Web Component\n\nYou 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](#layout-and-style).\n\nThe examples below demonstrate use of the `` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-jwplayer\n```\n\n```javascript\nimport '@ampproject/bento-jwplayer';\n```\n\n[/example]\n\n#### Example: Include via `\n \n \n\n\n \n\n \n\n\n```\n\n[/example]\n\n#### Interactivity and API usage\n\nBento 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:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await document.querySelector('bento-accordion').getApi();\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### Attributes\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
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.\n
\n
\n Keys and values will be URI encoded. Keys will be camel cased.\n
    \n
  • data-player-param-token=\"abc\" becomes &token=abc
    • \n
  • data-player-param-custom-data=\"key:value;key2:value2\" becomes &customData=key%3Avalue%3Bkey2%3Avalue2
    • \n
\n An alternative to using data-player-querystring.\n
data-ad-cust-paramsA JSON string of custom parameters to add to ad tags.\n 
data-ad-cust-params='{\n      \"key1\": \"value\"\n    }'\n
\n
data-ad-macro-*An attribute used to override the default value of macros in ad tags. Supported macros include:\n
    \n
  • domain
    • \n
  • referrer
    • \n
  • page-url
    • \n
  • item-{custparam}
    • \n
  • item-{custparam}-list
    • \n
\n data-ad-macro-domain=\"jwplayer.com\" would instead substitute \"jwplayer.com\" in for the __domain__ macro.\n
\n
\n 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.\n 
data-config-json='{\"playbackRateControls\":true,\"displaytitle\":false}'\n
\n Advertising configurations can also be specified using this.\n 
data-config-json='{\n      \"advertising\": {\n        \"client\": \"vast\",\n        \"schedule\": [\n          {\n            \"tag\": \"http://adserver.com/vastTag.xml\",\n            \"offset\": \"pre\"\n          }\n        ]\n      }\n    }'\n
\n 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.\n
\n For more details, see documentation on the docking extension itself.
\n\n#### Styling\n\nYou may use the `bento-jwplayer` element selector to style the accordion freely.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-jwplayer\n```\n\n```javascript\nimport React from 'react';\nimport { BentoMathml } from '@ampproject/bento-jwplayer/react';\nimport '@ampproject/bento-jwplayer/styles.css';\n\nfunction App() {\n return (\n \n );\n}\n```\n\n[/example]\n\n#### Layout and style\n\n**Container type**\n\nThe `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:\n\n```jsx\n\n ...\n\n```\n\nOr via `className`:\n\n```jsx\n\n ...\n\n```\n\n```css\n.custom-styles {\n background-color: red;\n width: '300px';\n height: '100px';\n}\n```\n\n#### Props\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
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.\n
    \n
  • player-param-token=\"abc\" becomes &token=abc
    • \n
  • player-param-custom-data=\"key:value;key2:value2\" becomes &customData=key%3Avalue%3Bkey2%3Avalue2
    • \n
\n
adCustParamsA JSON string of custom parameters to add to ad tags.\n 
adCustParams={JSON.stringify({key1: \"value\"})}
\n
adMacrosA property used to override the default value of macros in ad tags. Supported macros include:\n
    \n
  • domain
    • \n
  • referrer
    • \n
  • page-url
    • \n
  • item-{custparam}
    • \n
  • item-{custparam}-list
    • \n
\n ad-macro-domain=\"jwplayer.com\" would instead substitute \"jwplayer.com\" in for the __domain__ macro.\n
\n
\n See JW Player's Ad Tag Targeting Macros for more information.
configAn object to pass through various bits of configuration.\n Accepts A skinUrl string used to pass external CSS skins to the player. See JW Player's CSS Skin Reference for more information.\n Accepts a pluginUrl string used to pass external JS plugins to the player.\n 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.\n 
config={{\n      skinUrl: 'https://playertest.longtailvideo.com/skins/ethan.css',\n      pluginUrl: 'https://playertest.longtailvideo.com/plugins/newsticker.js',\n      json: {\n        playbackRateControls: true,\n        displaytitle: false,\n        advertising: {\n          client: \"vast\",\n          schedule: [\n            {\n              tag: \"http://adserver.com/vastTag.xml\",\n              offset: \"pre\"\n            }\n          ]\n        }\n      }\n    }}\n
\n 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.\n
\n For more details, see documentation on the docking extension itself.
\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-jwplayer@1.2110252343.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-FCmepjJfEjJoQN4Wxpuq5SRhXhA8l7yhO0QBfWHT0hjW6wgROqxAeC9SywUxy3YuvLPhHJlPm27uNI9vXvqYDg==","shasum":"f0cde77de06766e47604db679287800644c9cf89","tarball":"https://registry.npmjs.org/@ampproject/amp-jwplayer/-/amp-jwplayer-1.2110252343.0.tgz","fileCount":27,"unpackedSize":3108747,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB7kwQKeEW5kuDb1GiedJB88/ykn9KuOHAEvRug3ShqJAiBS7w8O2Xs8PPEpnI0C6g+JOjZfX2XcE1Z1mc6ttDM7sw=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-jwplayer_1.2110252343.0_1635247269441_0.8520685457297137"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-19T11:53:31.477Z","1.2110181554.0":"2021-10-19T11:53:31.732Z","modified":"2022-04-04T13:52:36.816Z","1.2110082201.1":"2021-10-19T17:21:26.981Z","1.2110192227.0":"2021-10-20T11:39:39.519Z","1.2110082201.2":"2021-10-20T22:15:07.604Z","1.2110202310.0":"2021-10-21T11:25:47.306Z","1.2110212130.0":"2021-10-22T11:31:10.470Z","1.2110011758.0":"2021-10-22T21:21:57.993Z","1.2110252343.0":"2021-10-26T11:21:09.668Z"},"maintainers":[{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"choumx","email":"willchou@google.com"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"esth","email":"esther@amp.dev"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"samouri","email":"jzfisgreat@gmail.com"}],"description":"AMP HTML amp-jwplayer Component","homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-jwplayer/1.0","repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-jwplayer/1.0"},"author":{"name":"The AMP HTML Authors"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"license":"Apache-2.0","readme":"","readmeFilename":""}