{"_id":"@bentoproject/youtube","_rev":"211-bc9beea8d5d9f8696fcb38dae4cab6f6","name":"@bentoproject/youtube","dist-tags":{"nightly":"1.2302271541.0","latest":"1.2302271541.0"},"versions":{"1.2110261518.0":{"name":"@bentoproject/youtube","version":"1.2110261518.0","description":"AMP HTML amp-youtube 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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"e4bbe5c706c18a2c817265b40388ca4d4771613a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2110261518.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-mtcS2Fx1ZMDmtknB0Ln0LmZLhDOPYXlDU0huW2tG6kUXfV9mabSZ2gBZchUvAWppM8BiQWvtAoAI28IYZGe9iQ==","shasum":"bf0dc01251dbc347a3112da80898663c506e6ba2","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2110261518.0.tgz","fileCount":26,"unpackedSize":2782313,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLkHvvaWCihsI0UP3IPamiUfu3UscnHCkhQkNr1lx2cQIgH7x5BSnLAiitWkuvvC1Xcu3pNtSE0szh6p3Csu/F31k="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2110261518.0_1635445243685_0.09083097523071504"},"_hasShrinkwrap":false},"1.2110252343.0":{"name":"@bentoproject/youtube","version":"1.2110252343.0","description":"Bento youtube Component","author":{"name":"Bento 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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"57e62ecc0e24bc2cd64467dba9d0f9836eea0182","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@bentoproject/youtube@1.2110252343.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-fmb9HzCLYcONGsBAZ7gFNiboE9EzEXsjELEqsEz/db9sXVbsThXUtfRUDEL4wPGTGlHRoAOQog0f3BDzkxSHQQ==","shasum":"d1081323532e13eaf4b7b3780c519b8a64c8e017","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2110252343.0.tgz","fileCount":26,"unpackedSize":2782299,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEcmsauK/awL9YYnCC4j2mgX+ScW9k76T72yxzzfFji7AiBN9Jvi7yY/YR4mTG0K8fczuVNy+oc1HBsYCc8uPM6pJA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2110252343.0_1635457842787_0.4310417092660199"},"_hasShrinkwrap":false},"1.2110281959.0":{"name":"@bentoproject/youtube","version":"1.2110281959.0","description":"Bento youtube Component","author":{"name":"Bento 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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"55fa3e004e2aeece5faf9a68717228077c215a13","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@bentoproject/youtube@1.2110281959.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-K/eD2lLrrcyWt53YKSKSuNG4FDdhwrSM5Xv7JFPKL/GffWCiVz+CHEYbz9S8k9gprtR7WeBqO+k0cj0XjUYMgw==","shasum":"cd3c7b0ffdb20fd1ecdb4e0c97b25a581b8596f0","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2110281959.0.tgz","fileCount":26,"unpackedSize":2782299,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYLcw2HWDZ+XfQ3H2rErOUQ0fDzQNTluG/QkAq1MygdAIgETZ7nX+ceYKDvZnXkuLRuYo5/CByIy8Bh+Vs82Woc/E="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2110281959.0_1635508555246_0.5077177154018873"},"_hasShrinkwrap":false},"1.2110290545.0":{"name":"@bentoproject/youtube","version":"1.2110290545.0","description":"Bento youtube Component","author":{"name":"Bento 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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"1cc07336e186d25fc5fbfb2e8f7e12c4a5c79fe9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@bentoproject/youtube@1.2110290545.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Rkl6C5kN7Gz2jok5wHYmQ/IYFRYiptr96ampXnF3d1wmCzL6n1qLKh4QSbVmNqkanOoPTNC99N/0aM8BuFhuSg==","shasum":"e3c585abd3ac115c1fa40bb6a538481739d8d58a","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2110290545.0.tgz","fileCount":26,"unpackedSize":2782299,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAngpjMPzuyfE5Y2whnsxe9vJ2r7MHGIUFAioYzBqhljAiEAw9L2kxY8v7dpt+GRgrr/89Wp5dE0WMvN4/TkkklmCqo="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2110290545.0_1635593094082_0.8022331462226338"},"_hasShrinkwrap":false},"1.2111011823.0":{"name":"@bentoproject/youtube","version":"1.2111011823.0","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"7bd4192edeb4ded8e78291b094118653b1a78939","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@bentoproject/youtube@1.2111011823.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Tzd4BRobjEiPafFt+CbEIR40w3+4wGV7aY9Qe/i9sDVzrg0viB9ed6s8sOP85+aY0uXJPIgyUgX9BRtUTAqMpQ==","shasum":"c626c7be55ea203418f20c271fcdeb23f150c174","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2111011823.0.tgz","fileCount":26,"unpackedSize":2781394,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFoQMuWS5+nEmBojfvLmsJ5zpSFJruFHs5yt8r4VWbAVAiEAzGPHb6I5J2Rc+SFvG1vH5FA/N59NWRx2TvvuYK5rvSY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2111011823.0_1635852493777_0.20145310215431245"},"_hasShrinkwrap":false},"1.2110152252.3":{"name":"@bentoproject/youtube","version":"1.2110152252.3","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"7a44c3f3047d8b5f5bcbcf5a86c4c1cb30184bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2110152252.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-84LV1CoYrEi7hfaud6AJd/5UtFlMgkhV4Y7MRwr73PzkHnA7Mm04U0aXtj25eGyTMHLqgUd1qUWydploqMzLBg==","shasum":"bd8b3ab295509dc435bad5cfc858dcd12a219237","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2110152252.3.tgz","fileCount":26,"unpackedSize":2781394,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKVulb6YoYpTX1k6dyv6k98VICiZ4Hb1+MlewZuIHQBAIhAMmqWPbx2IGyi+sAA46c0gwg66vHuXfPKgb2Hcrd4NNQ"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2110152252.3_1635890820762_0.7326520090481627"},"_hasShrinkwrap":false},"1.2110212130.2":{"name":"@bentoproject/youtube","version":"1.2110212130.2","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"7a44c3f3047d8b5f5bcbcf5a86c4c1cb30184bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2110212130.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-6mo8AXzYaXufKmBtSO+ZLE8ZTzz36ZA+klIiBnjJF5x0vDd1Gcc/DsdTwOw5Inup7Op98sKk8xpDQuw2/dS2GA==","shasum":"d924bffe62978cdad78138f65e70d051b8a33795","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2110212130.2.tgz","fileCount":26,"unpackedSize":2781394,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDU0bsSL0us8oER0K6b9pDkVh0glElAmbjVUyoYm1Y/xgIhAKG1t0T8ERXd34JSC2TXfZ8mouiZAcbFJGLA/oP0Nmxv"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2110212130.2_1635891534407_0.5513934633737161"},"_hasShrinkwrap":false},"1.2111022043.0":{"name":"@bentoproject/youtube","version":"1.2111022043.0","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f4d548031e8e20aaea8ade649d3394d56518b769","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@bentoproject/youtube@1.2111022043.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-OWp5Y+do5WMu/9XaXST7Y1HsJT6aWX8UqaqwjXPzwo3YgVhB28zFvPpMRxulQbeEtuTbyt9LlJ7F/uVeno25OQ==","shasum":"fb40cb78d15f25e940556f5b54a8f36b5e1d72f4","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2111022043.0.tgz","fileCount":26,"unpackedSize":2781394,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMLTFM/PLFEA7h/3A4Wv5NtEvu5coU+lSOg4KzVZo3eAIhAIK9VOVFR+a2d7MRuU0j0DQFpLzjkhcnCiHryaIcF1gD"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2111022043.0_1635938692647_0.5933947964088264"},"_hasShrinkwrap":false},"1.2111180040.0":{"name":"@bentoproject/youtube","version":"1.2111180040.0","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f53cd87e15233c147123f81aad5da820c5581752","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@bentoproject/youtube@1.2111180040.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-DwwCWuBXr9MwgwPu0d10gBhs1oEca3+MIT9zsnMQYnRSwjCZDfCpGQzHrxbsCXuzdJqdd6pw51piFJShTXy2fw==","shasum":"077550d04a5cd7680eb5681bd7e63552c0b5ab0d","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2111180040.0.tgz","fileCount":26,"unpackedSize":2655233,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjHcE411Et1AVQ02XI/m5DDeAPlzHh5P8+8WUwzbgskQIhANqdvLML953UAu2HHd2wuSdPDVHIV3ftgiEiuEgCLm4o"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2111180040.0_1637271143683_0.8168696682528396"},"_hasShrinkwrap":false},"1.2111060251.3":{"name":"@bentoproject/youtube","version":"1.2111060251.3","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f53cd87e15233c147123f81aad5da820c5581752","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2111060251.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-QRXcsBb2pCMdSzGi/xpy5MEcAEpk1cagPIUE3iVmdqB6ynTQFv4H9ccvD1I0Dv+vTMz/cXVTlVBwZgDWhTC7dA==","shasum":"d73ea684d03e3cd3136bc16234daac7e83ecab4a","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2111060251.3.tgz","fileCount":26,"unpackedSize":2655233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlsmYCRA9TVsSAnZWagAA/SEP/3UeUxBeUTPV1RAYO1y/\ndYzsAD0l1+ICJgowg9mEdhDqkEBMaLZqUsSsQqFzl3IVaWVph22h7I4IRDxm\nihb1HRMeHiI/fW+GkeLrnySIMZOdxrsrMRNzU77bXQXDPSOM4FWuNIqCKrEz\nClY7gF52/UTihMsyi/tNyClqkiXnKe/gE7S9PHrBh1/Jj1wZnA8fZh8g7uDR\neFUlyV6Mga88nVW9Hs+Yc/6RFq0o9dpFYdN/vDJQUbCq8Dh5Pm6YpPSh+oPX\nDediK4P2uk7jZWZVy4Itwd0Usi9pmxKDYDSrsvC1VoGZALloReYQMfS+Ug5C\nbrVnV+VO+2KHNtoCSV6UbO5puSVkHKegGf4jsbY1fUK/RnXiqktZnn1wG6uo\nbdFJhjfSqLn8ZFJCEaFaVRQlgaNwAhVNug6LPgQDE5xyhKvOaDhA6msugxy5\nb8DJL5Q2XqWYzBVo6uTdtYXgX8bUPaRuk9gEEvb+Koa8G00XMnm53OfuKcJ/\nsVQKEFza0Z3OWacA+vtR5PKI0wrbjxaudpq8qS3h4//kWchJHhVv/vtmUr/r\nMZSnFCbnR6sgIixtnXJdgMLToUSLhafAK05nl+rN5jPYsegx1L+wBiJo3Sig\nGHqSqOKkBcPSNunVRoNYxKmV20D0+VQFuqgLWIUYotWegQ7j6is9lvGF5QQW\nGhO4\r\n=klOm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDjjs9Dc+6Kg+U+RUanyha2gFqRTiu1tFhLcUJg0J2TOAiBb/kC/q58BktWKcmt8kKFcmkGk4vTLEGbmrNgo/tmVdg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2111060251.3_1637271960415_0.9846735717319357"},"_hasShrinkwrap":false},"1.2111182332.0":{"name":"@bentoproject/youtube","version":"1.2111182332.0","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"34ebd943d9b16506b7a515b38941fdd8357bd288","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@bentoproject/youtube@1.2111182332.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-QEaK4OurjAfivsoWN9mCpa7UKIifKP2ow81RCo2QTVV5Mx/eTtba19XmDjCqPWOHZWfVlQz1E33rynSWT14tXg==","shasum":"2bd02a3840553b7601a6b879698546b253ee9b99","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2111182332.0.tgz","fileCount":26,"unpackedSize":2667626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl5hECRA9TVsSAnZWagAA3S0P+gL7wkUf/uDVLviWuXK+\nnw/bT2MWa/SymXruPWCNGXQ62Bxa4PxM48tpHO+yVfTT9iggZB5NeHrNnnIv\n09UCeC5UKdZHexBnLoD4yOyYRBWr1btZ3q3txlbn4FK5xs7SRLuJp5dZNaE+\nYlvbt0Lqe9kPI8bC5+pbPJRmsI2JqOcG00FSJ8x3n4C1esxEqmMgnCC2ckVX\nJgnGw4fLcZ9k8oqNHIG2V9Ba7yHcKoLG4pqTIg0k866A+0q29CDY7DrkvXqe\ndDIq4AhdLori989qSXVYF/FzfkogR3BUcIgBCVVy8iIFGj/ltwJcGUHb1Y2W\n/441E/XdjRRUy179FniQD9Xao2gTnhp/DhBAbKLc1OYCeTzp8KowqYbAMFy4\niWeSVxRLdy+GdIMyQQV5/DOu6bbqD40QZpxF36t2XtHONlf/zzla2TIH74Ne\nnz/8FYvaqlmFLiwY1K0OI6U8gbmD+2nb6qr2G/QQwEU5EI5Bo93qgoXWXw2V\nXQhnjdnYaY5TysYjVYjb8OJgXcBLkJn4mF0FJN7wXX/020bcTK6sdEYkmKNp\n/3BkNNO4KJIUDuHSbAAnPHN/h7l4xbZ2Ru3WodKjSN5jZSECsdy6a+Q5fzol\nE+dDK5nDwsqXxMNnCK6mVtzmZN1QL5ZAW1ffJ6xbir4JI73c8cwwc+GBToJv\nviW/\r\n=SBhC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTWV6O9a5yw/5eeqN9YOnksoefwlgzT8j+svMJ0GCoyAIgJxqzDrBT42Yp6EGCkFGKnsBsfQg1bBomFgfm0gZb7pI="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2111182332.0_1637324867942_0.9128336832890716"},"_hasShrinkwrap":false},"1.2111060251.9":{"name":"@bentoproject/youtube","version":"1.2111060251.9","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"04e44a3695f8db307eda69f753e10665cfa70fa1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2111060251.9","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-WxZIuyitWVLJ/oZpvp4o5fbrclwHs8jea6IR3ag/yU+IGUJNgi4eO3Rp2tMPbzQEq5KW3H6GQnUfiOObNk4AcA==","shasum":"cf27ad4539ce48b0680b01f702cdebb4807bbf25","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2111060251.9.tgz","fileCount":26,"unpackedSize":2667626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl9IPCRA9TVsSAnZWagAANa4QAIuS+KERlv+e82kKTbNO\nuyQMBFv2E1LrDtjLcLCs84UL/3rBnYC6vjcfeIVLDoeARq7ZESHvutY+7ef8\nEvZpZfOwHkcnqY/tlAZtnq/Pynx9UjGKEuwzy4WVeW+17BZF6qdtDhR7l+oi\nlRjCxbVQzAl0x3iVstGr/ouS4HUqnndS+Bfq7mRLQEAwXxT8U8Jpr4NyefSU\n60p9CjNxTVyGrFZbVPdjF0yiLeCCFa2aWuZTso7pnCUxeErZe1PHaUkpzQJV\nuDZymnW9lxmXPNhhG7UZ+ZpB9HRwC6IATD8wwPo3nYChlwS7YGetLlkYGtFJ\nBIS0pcgdWXm2yFcf27Vtq6VqJJrqvw7BZBRluQWNahViCnbF9wQLGMlruRTo\npK0wjMZuDeioeiRSwaQOuIs9zEUs6CE+gyZdCTcLyx9R9yJUAeRnYDJQWUlv\ncLQqBIWb53OGDb1TeSVtHOPv6ozi7oJJikEpEf1z5SfnXHqCHDGzot6nmvHE\ngiSr/FSWPPpLlA9V+/fMM9qqvSItKPJYwFKj53zWq4TNoBpPBGOi0Zu+yU4C\nf9Lcbd3ZlysxlIyexDR1RI5QeeGsbM9Gl4LXvGHbo6NoNHC89DYhhhtrnqF/\nBeuVl2I6Oe4W3zxePOtRE5qxZvHQBbzOsvEL+6fetHulcy26VGVA8ltK0fLm\nZxo/\r\n=cp8B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJ2BRtd0DAWIdGmNjYRFVqCrMgJCFFChqMqo7lACzskQIhAJvwff0vEX96feQzF9veRqc/YLNgBT4iutFtHyl4ydMf"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2111060251.9_1637339663757_0.7545249314316886"},"_hasShrinkwrap":false},"1.2111191951.0":{"name":"@bentoproject/youtube","version":"1.2111191951.0","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"22d6da19b9e01e75e6b67f54cd425c465822fe8c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@bentoproject/youtube@1.2111191951.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-UBFFZ0VfVg2FMWKLX35czTVetOxAUnRLspSnv7uJpRb0oUpoWi0etmVfi5LBf2tmRZEwO/WN+84he2J5KRvcRQ==","shasum":"d2554641e5c3231c003743a1e432b739f79b31ac","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2111191951.0.tgz","fileCount":26,"unpackedSize":2668276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmOmJCRA9TVsSAnZWagAAiboP/2UQk51VCMRsuTnXUnZ0\n84BjF/QSGK8G6+BzKFcY2g5qZqRAqFaT7hmhNdFRmEr8MXisEwz+OOdxKfxZ\nke9+bMcmBeOU1D8GRDxLmDEq7myFxRwkcjtPRbzC7XQoW6CSYIhIPOU9VLng\nDCJGkJHWY3Lh08Rjmz6K5hZfFd6MTrFKt1xzFDkikgwu+/wkeEJspJNr9HzJ\n2dzgMDsEZpGZ5TJjGCG95ohR4bYDL/w1WfV6KmA82jyJgmixE7JFQ9MvQhQ0\nIVACCDlsJXkUd9pA81au2DoYiW/txWWRIdBJR7BR3//Xi0bAgW9xNgBmaBwl\nHflgYVlUUcZKVpxUkBN+nVNNs0pJEENgY0V+mRzvyZNX5UAJfRc7hgCXY1Yf\ns4BJvE9LnrSQVu1XxmwzfNAURWR2eHukrLTZyS+ZUlrDUihDWa5gyuVl3orZ\ncIdbCygBtSLj9AFUTrrqR2PrxWwfjv9q6uqX+Tz1UkOvFecWGETff8gO8JZe\n3QLjU/AAY2tmMcQGc72p/pYI82d+vIW8dsZlyUGzSAoooQ4qU2/J9Y/hE9vo\n2tJTHccqu7JgimJS2T5GMBDDH6YkuNNqgHDPRK74YpHGUdOW5aMI+cwJ55rA\n199BpdOIxQSnFZrdfwwxzGG8hZ5q7QWxW0fbkGX1MMYrFgsO9O4GfJlsd91F\nSNc/\r\n=U8Ul\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWKDO16j3zIHLDbuX8iebY6vibEyHR20jk5Oe5d63r7gIhAOt3Ib5/3o+pv2XG58lAJ/TGwMxM43OV6IKdtjmKpKgD"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2111191951.0_1637411209260_0.18465295104112767"},"_hasShrinkwrap":false},"1.2111230244.0":{"name":"@bentoproject/youtube","version":"1.2111230244.0","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"d906c0bae3e05aebd88696b9659414f63c1ca45a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@bentoproject/youtube@1.2111230244.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-SU2+ruX53if/l0f67B46qOqijag6qC2ETlgSsk74htRrVnCvHpoierDw1SNOnYziwCiv43oyk8rHDuQ/+ofnZw==","shasum":"311ffe3030414ce7510cbd0c42a8ea0bc16be18c","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2111230244.0.tgz","fileCount":26,"unpackedSize":2668276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnN5hCRA9TVsSAnZWagAAnnIQAKC5OpLJlyfVSHWYIuZG\nHo0HHn8cTU1Wbw1bsNqNHhHzbaC+snlhuZjrH1WofMUcAyv94cJGgZJQNs1u\nErIG3l3St5Rt7WkcIGQ1LhFnC7uFy1Y69RcBvwj3MO2EngpNS2cNE3z9g04y\nruuOe6bZDfGLFy9IiJpMgnas54JUc1cg8+pDo5B4rtRrhcrQNRRJteMUBCA7\nhpMys3QEojKL5W9mgnpMn2KG87Sb+Ucb2bS5jMB7cRZcLSa7l7T+Wr5Je7eQ\ngsr98RzLHqhRR00nlu3IdaIwV+jlPFZz92RMGUKp8F3aVcbbwE/tIkXffv5w\ne8QJDnChL3oBzcSW4ks/bQidE66FTjGvWAIz+pUo9lrG5BDE8J9kz/CFBMAg\nSoqod3MKrMfitHb2ZMWYO7wK26bTFGdhkjkuX5z3KOn6cIEUUQYS6kMR+voS\n4QIdV9ogWd0GUjyCvvFjc/A3eK/xATQDeQN6guVMta2wEJ2yLL+K3p53IvnF\nODLJoeY6kHoBJo5d0Mw9AxeLXENfgqjeloZcZthpMqeCiZUTSC+dWu5ystFu\nyicQX0DMrNaU9UNa1+NpIXtXgyJM26kZFwtRUMF5kF6BSBB4/1q/V1Uw2Pa3\nFbXvlKtOVjJQbi0Q0vIRmTZJPDGvhFIOV2tJPe8/OEsj0r4Sq4A+OFCiQIK/\nb4NR\r\n=mt35\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEx0YrYGHxL+0ZXeT8AAIqLMNk6drrdNX0FBGZZ4L7I8AiAc+lzjkT5Hci21dLh0zzH5zpRO5faoZSzNmSnwC4mQDw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2111230244.0_1637670497135_0.2954736729215086"},"_hasShrinkwrap":false},"1.2111230636.0":{"name":"@bentoproject/youtube","version":"1.2111230636.0","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"46e8f482bf5e3008ef07e950034d194c48317990","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@bentoproject/youtube@1.2111230636.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-rtyW9cVb+RPqXi+EOwljSKPBvbB4X8pOk0TZkkxaqU3PkAerWM8/2FDJaoRAFgDHqaDfyydBhlZmb6llEOla+g==","shasum":"c3730a08240bf6786c7aee0fd906bf7607f62756","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2111230636.0.tgz","fileCount":26,"unpackedSize":2668276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhni9nCRA9TVsSAnZWagAANDMQAIiSA6W+LfiQJDfnBnwK\nGros0Dsf+gbdyMZEJGYbdH1FOmpCXKss3nh7iAbEO2xGkE7Bch3jc6jqVXt7\nMq42Z5gvP8oFyBWq2cc9H8uZCD4RsI9nsN5C/cIRV1BvWHrK90XqzhTpZF1A\nHVLHnrpIx6LXR2Y4UN7pIA8MB3HkAyXDSdcdmHZOUA0ZEA5pgOMHo11XUDtm\nH7584hbxYEhQNTgAKTzGdjRRuF/EqznU0JGT9FsbKNX4IenwJaPlMS188YIH\norA+eIKqVGxbU6SrWDs/gUMJ0FGSIGGEN2TkPC9n53BlMpoNfIvi3NIDlTEp\nD/pkvqpIAuBNXOWwHng4CE2aYgP8APN5afBgI68dHzPmlktrwZcIs1WiL5oJ\nvaqNR7xozjmn0cTEErS/Ti3YCbII+L4HOahnFR8LAa1srpWvjGWPYEuNNx8h\n7Cs/ZC+ZmdELAnjiNoQ1swApvVZ+EE8N47enxqVPG0gZZffEaSAM5nEktY+W\n8LcCiH/D11YT4VREyYBGCbZojQX7itmaqraY/NssrJUjf8tPCdXFmPRy0aB/\n5fqEdAbRBiuPAQCJiCMhbmnY1ln4EX24CGHJEBwQH1vBW/+KSTXiegqhigll\nOG+MXvOLq1tEzIfbameMboJCkuxNrKsX2kpHJoc2omW0ejZJ9GWuaVXWWgCU\nQrsi\r\n=hvDs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoTtR64Gh25AoU5rOTI30UxW7oPeVmO5lV/KKhP/+TWQIgZ2gVUuEHYrcv8cAtWyoOUtPd6iEDqIR/FXxFdin9PSU="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2111230636.0_1637756774743_0.8932204313428476"},"_hasShrinkwrap":false},"1.2111242025.0":{"name":"@bentoproject/youtube","version":"1.2111242025.0","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"b78e8781ff3976b3bff1ba881cf66dd2609b5c07","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@bentoproject/youtube@1.2111242025.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-26Y65DLLGH5xKyHMp1sWjcYk03TV+++RaEDWq9b6nbtbH+felAtAp5lRX2zIZXKKjQXRiMmoXQZfnoOzAg91LQ==","shasum":"056478e71272e98e0f007528cee03c8bbb8c439f","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2111242025.0.tgz","fileCount":26,"unpackedSize":2668276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn4V2CRA9TVsSAnZWagAAWSoP/AhD2rBzeKlbv8Cz1hnr\nnu3hNvbR0k5VamBidyvg8VU5pIgFpUZnUMxU4HU0Deb2OnhuuHXqKOcq6ByC\nnzFh/rmXVkrn9qP4hKu6ajHOVUA1Fy+T8rM6aCKooM9K2RXUJfblJl9EYG+k\nFSOLhZd3A2wF2+Fp63khzzKKQtgU0xqTLQ5GKSPr1MM/5ZB6/qjhuO8t/awK\nmUpSDUb8inRPhlQANTW9w8OXVmlDKtu+ShBLSd9BlpYL3ZoEei5gX+MuVV/j\n2Rb1ibx7RWe7WVQXzkG6YPDHlILVNwtAQMPjpPsXGtpfANU2Mud61QAFE1IG\n0bp8OeK8HO39AK7iowyDy+jzNOOVGqTSfkGjUvxqjRd75rGDjAVXYOJq974Y\nvPnCoXolTtnu2f+29EQYJNZ61OMsjqlW5bFgTdkUAULw3XTYfjhnMqST65PL\nTl/WKGEUpvwrQNcNbegqko9MMjYEyg/1t5g13/5oszppSDle0s+THWrsOMin\nii7Ca3HxRGG9evTc4NPWymXWEFg0dBnQ+93vPmSlNhDOwUpEkfrz2CYTtuJ9\nw+GvF5b8btAzgiIW0WMazajVSkbmTO7sTrRVqOZHAIqbh6BSTk36E15c6E5d\nAbxoFBbHzffU2og+wrrdIkv3JYaVbA0ZLMbdl/ygEEIl+q2OjrAOGO/6mYvo\nvTH3\r\n=NlYU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICCXK2vsB3VxnmuLbDgPLGriRcL2Hpi6WEdO85EvmlmMAiEAjVg7KM7vwOV1z9KnuC5NFpp3DIFnFpaGR1+y3dsofW8="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2111242025.0_1637844342508_0.5314152511089436"},"_hasShrinkwrap":false},"1.2111292120.0":{"name":"@bentoproject/youtube","version":"1.2111292120.0","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"e938f7c9446e2d1eb0f0f865c0f1ff42a4be76c5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@bentoproject/youtube@1.2111292120.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-FMRkZmLRgKhpMQQw5oGMjkqduJ3hRJWpj+oTANjhJAxvTJw5VKnME/tJyIPb4lwW2jkiWwAtz4Y31p4PWfIzBw==","shasum":"aee9d5d4af306e3f31b6a77545ddb136343ba24f","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2111292120.0.tgz","fileCount":26,"unpackedSize":2668276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhphyMCRA9TVsSAnZWagAAhWkQAI4CYvZSZGwpG7DmXQM4\n4OBhNVyk2fVngSuD5qLEUsxXqfGUxDx7Zk+nZcAH5nqftCZtQ0QSEWLJEajX\nH+fmMk+KglN6dYMD2eHjSqzZRtFvslr9b4ym9ccIjt9YR69O6QDBKHgCWJ1P\n678q3FaFzFgCn8utT6pP7Nh3hxg3xUtOLGx2RkuCKkuyOP2Ct717YcjIscSC\n/PTXwvO4AEW7nAqnV3SffXpb9gdH4MjMvmPjV8nUoK/3hG8Ymj0gEVRLKWYl\nXNu1BzppeOcLJmv5WSyXxVTcuvYxJ+a2jsuqNEFVTeqgf5vIKtILgROfBEXC\nBuBovCKRvdcO/kwzq6KqC6hoKpPTbSPHyZoiaiDQyFj7arXhGhvHi8GWrWAE\nCV1LCZ1BoPZPXal556d72t+VvS7S/0wEJjJIO8KHLvjbLLc8MvFzn0lsDcJB\nPhrd2nkA51/xtB7bGqZxhZsq1etXgGTuL+OJrSDA3RzUWB1hIHBc89S9bVA8\nLSOjZfAFiCuQiJkTuj2I5yfiWODTSiFrtfDYKSNyvntNjqDSe/Hb0VrxuseN\nB4Wx/4+lY+sY6E6ZMDY34ibFgLPAU8XopbyGgRtLDhPKZWCw8yVuGj/tF2eV\nokjWYVakUg1EGjPlzypivPM8desTYW056X37Mk8cYTKvpqffJNpsF+b+ARFO\nZ/CC\r\n=vAwX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHbnsSLD1Tx3CwI/Ko2QfH2M8nKk9EVvUq+Oz59kw32wIhALvpnEx8CaeGqD1ahZChhOy73t/lRe0zIr+7bTCPDYAh"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2111292120.0_1638276236836_0.7423746861420892"},"_hasShrinkwrap":false},"1.2111152338.2":{"name":"@bentoproject/youtube","version":"1.2111152338.2","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"27e204ed206cf75fae0a37d8f110b5fedb45fa7e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2111152338.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-88qu1+rcLCxbBs+c9rfdQB26iRNmpKCia8b3lcbj8QITyqL8J7RUA8eNP9A+KHLqGqR9E7cO72UJAYaWZdZ8Gg==","shasum":"68ce9440df582c0834e69836eb25824708999bfe","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2111152338.2.tgz","fileCount":26,"unpackedSize":2668276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpmYVCRA9TVsSAnZWagAATPMP/0KQvNsxsAZxag/5Hr7z\n+QhueBNyT6JSytKIo7LrMnFLTbQNEG+ZvCJkabt2rskuBV3f7dMMCIwsN74w\nebdpcDfPvtVwyGgVVK39G/m4MPh1nXd6XZOvbMTiWKMQUW0f8/2mc0VE2I45\nypOl9M1uY6lWDG5ye4um771MWAXzrZ19QeFXrFu3vWZwo+ptT3f6D1uTXMsB\nWbaotpH0bH7H9pWT5CQKlRh4Lgt9K4nisuW1WkZpLN98ixjacZHjLjsgg3zE\nCaVOCjk8GLNos/IPI3zB43NfwYu/FeLo9JGnJj6o55NJvMl8sFgkMF9U4Ajw\ng4YSuf4M7YqyceobOOtPTF5kdggVqvUg/QJsSyCPnmhaZ92euY3pkmiqKDvC\nrFjgkAZXVtS367wYBjC4sdMK6W88tqnb4j991BcdwfMXYMdwNUzL0GOtr1Tc\nnK6lmjuinJP5SPU98MNP5Sfi7sL7bQMThOg6s9YQJO0qqQXrhV+Ns/eQnmzu\n5cXvZSJZn0Hu6+nHgMEuNCoFDbvPa1QHsAurjn1uzoPnuYIZrIhK3NY9O6ZK\njHPPkFU21jks/e+uU+1Ey2/xY+4J3WRVlzGXWghiHFjxajd2gAWzi37VJYMf\nYwmyb/WkT33wQV9Yho/n3dpBqo1a+ZOdGUhMdElEGWr8tfkKBIKahtKuUo4x\ncY5L\r\n=dTxu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF27gDKR3c5mhZQq9ONAGhJ/hO/aW+yoIPITNmJFinJZAiAfh5hs0cLleYVwRYjpNirfuhx4J66axGr1gcCq+vLjBQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2111152338.2_1638295061509_0.4953606356303222"},"_hasShrinkwrap":false},"1.2112010058.0":{"name":"@bentoproject/youtube","version":"1.2112010058.0","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6d1060a3a4288fb99047cc700661d589bc9e2a01","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@bentoproject/youtube@1.2112010058.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-D/DS76t5ALlRptRiCLSQwVeCEpbyU6w4gkBRcXpO9e28yXzFN+DyTRq1y8H+C+LVlPertl649rkMElxIQnE31w==","shasum":"e77f2c1ce0f3993975c461ef5538f834f7af4be8","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112010058.0.tgz","fileCount":26,"unpackedSize":2648368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhp2isCRA9TVsSAnZWagAAGlQP/2qjzGiGlcnmAw2769N8\nYXxj6Qxh7hKIWo3kwLaThv6u81cLiAkpVrl4q04AlW+opVxOCM5nPYKRM4P2\nz4ze63jAtyMPW1LWAlZwmgNMaQzCgLhUkWHKpxUkIuFpCnvHp0AeAiF8FgMv\nGgspH2AV482ck/EPUKM3I+yJOYEIdRGyvALgd4EvGsBureWI+S810KV4wkR0\nHykGDeEurQCKl2OrEpp81nfK3x6ovWkLaiwK6vwb0s3UB5LtWD8pDlLazbxT\nnFaWgq9ZEn30IoIIuXXixLiq6BKteGPXsvojN2ZJk1YyBejfgUJp4nv+cPix\nlmXtWoZUFrPF/ZnYMJqX0MAW0v+rpnuJUu+FeW3ObBUUY7qUN6DjcVXQqhsn\nkDkkhKermWETlA0HjGCxyaUmapcOUkioTJfgctGxTeTphiE8dDvmv0I4aqR3\nOiLm/dbvAXqwgYfgLHGzYEG0nbVI7ys5uWmPWmzgIllJgs5uAeKWqpC0O3Nx\nFPmBZruU+Yv2EudxEH6WgCrePZICbb1QW7GKEWZliCwt0tTcCrIbuUStV77m\nfqb0d0G5GjIV6NioiafQKFx+YWBCBVR9IlF0xQX5HH3gRg6n2sIeLZK8W9Ho\nvwbDIA+h7Vx/iP1x1+MlavOM1Of8xGUySPw6bg1dJd7FblZEmA+YB7P1ChiJ\n9Sba\r\n=xd5O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEbBTWL8rB2DoqzP2rotRruE8tQfY8C3SFzkNUd4qK4NAiEA3RGvk0XTqE5KWdstmQNL5pstGMMH4A/FkRtoyaCWkEk="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112010058.0_1638361260517_0.24303339385536415"},"_hasShrinkwrap":false},"1.2112012300.0":{"name":"@bentoproject/youtube","version":"1.2112012300.0","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"4ecf84d856583465c1ab59847234535fed16d55a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@bentoproject/youtube@1.2112012300.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-0Y1xyNku89jmPWUmpFQYz4K3REQv+OavgtzByrfnUH/MyPr7R6nbuTD8HJNMl7/TH5JT9Fje42hUz+F0YwIY+A==","shasum":"79103e54b2125a1dcaaa2e8e20de38e6b44b86ac","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112012300.0.tgz","fileCount":26,"unpackedSize":2648368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqL0WCRA9TVsSAnZWagAAk1AP/1BO1dv6eOaRH6ol3g1v\nEtLcu1SFzlx2eKZG9TTxO2cqwE6Avf/hqCI5K9I2Qmc6fLn8qoDW1t4EWJSp\nD+HIKGkBAfCFVABgDasUI/JGJarBti/2So6Dzqt3CLvVa4VawPAB9PxWPyoN\nqB/vI72AWWVw+Uzyec1xvsYB9cSG6q2m2rrlOA3y9KPWTvbTDDO8wP4AgIls\nQTA5k7/AyPE6F5jkYFpBKKrabrz+0jS2Kc+wLmrKDBzQ/nfM7JUwOI1ER+OX\n8zJNWO1+O+5JFf7HjxTSTbFfhT02xAhrswLc6b52ZLcsVFRzHFQvQjHB8cRP\ns8ze3H4ya9LbpPxtsDX0PN9k0sULIuPfJnAVP65kUx1WcId4NbiaSpQVJeza\nrvi3D9CuS5/A7ERXVvbf3YSrtYW4VqcBb9H4vA9WdIMHdXxXnt1ypD35ryQ3\nUkS50ksHSXMCmOF42sZ6Z4ithdIaLobokI4RcCxogqjV1iwaG7zVRlb8S7yn\nqau06gl+mV+SN26Ze4kLGGyEXV/eXuwYZwJa5pgGJvAZIVqe/kiITiRkjBfO\nuvU9whO9jIcfioSTMWhY+h7xdJ54VknRY8F6lz935FokcBboISOEZ/Or5yPV\n8tSjQqpBTDeAM4FIQnOwh2NV+dtNWCAWHeNBKaOkVVf75PLaHAMz1Pb0y4y4\ndEhN\r\n=SaWH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDI1GbTFrO/PdXtA3nB42o+XcW0ZpOFtN82ZWRDLY98pAiB9b3DQ6ms/Irmd/SfKVYUGdhEDR3Em165PvttuZT6MAw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112012300.0_1638448406368_0.30836965654062864"},"_hasShrinkwrap":false},"1.2112021656.0":{"name":"@bentoproject/youtube","version":"1.2112021656.0","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"4a66d3f7120b51959ea01867aa68d516d5e0dc36","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@bentoproject/youtube@1.2112021656.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-JyNS30Gq1nSbbThJm/Z9gGRsPwF5ZvbWQH9KCb1zYh4fBWWxX4yiDwtlcQiP1askd8UJLnF85rFu50PLK/6uIA==","shasum":"62eafe03ddc9369bb702e88d6ee40c0fb0020925","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112021656.0.tgz","fileCount":26,"unpackedSize":2648368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqgyMCRA9TVsSAnZWagAAvNMP/3yCbuzerAIVtKiyU5fc\nWaw8FAg8NfqoCVsgp0irnpa4/cimaxRPQJlNK91NEUxRbGwK+ynpHzzVJUTa\nMfMkVTVq6hPt0s+elpuixeiBnkd/SSsj9XKfy21Lv+FX1Owi7xS/bLiK2leB\nLTHSp5c77J9lyR07s/cxdDcmpz3id1rl1sD2IfSUvTeopL8BcTxmHlrnyB0s\nKY6vq9h21UIRUGSAuYn06vAnoR9ZdOpMxvvgMH9kgHsH8/a221bo68sqhiTY\nuooWhHpzHYQ/iUMttfjpvZdOMpiDPk9pCSHqkBw9UnIhV5XdmvukdJBbyWFm\naqqIqh3OwF+/WSiXfuBg94ie4cv0Wy2zjcOHA23P69siPAKwFZSQA1T6vK43\nyVk04JD6PdhorVb5yryeuGu09uxAOOrw/CgUMtpieVfLPU+pYhcvsSaIWijx\nu+hZw8DoJmRU0bIx5fS+QJ5YgGIJ/AN6YeVL5XbKGeyoUq1fc1nIbic19x+1\nhoQlIZzCCw/hTgWzuua+CJtgSqci9eby8XMXZ2Pu1MPk8/JWWKAy3OYVltNT\n+oCYOD3tYPTJbwBIK6YCax5TzLf0dGP8ZeXMmiWfBPbGBiLssyVeqGjg9tEs\nvyE9RK2K2ivKOvzd2zotPpCDkW9KElwM/D5j3S0LB3oL8D+qL6s1RPkoq1nm\nk3zW\r\n=xm41\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGA5Mjn/Mog6XXUxF9CoJj4WsKwaeyDKeUZEl8ZzEW7GAiEAyimuRMydZ0yiRROofcpj4Xc0mCylGx/9Cui4cq9awEE="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112021656.0_1638534284082_0.28894077330222334"},"_hasShrinkwrap":false},"1.2112032204.0":{"name":"@bentoproject/youtube","version":"1.2112032204.0","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"80ca53e97f8ac619b78398d429e0031f40cf68c0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2112032204.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-NDO4D0ysZv/dTLetyKCavn5bJku5elH4TwkxV+yfIAGWgh75m/qbojGzYknKu7h+8TE3nAunhNcX3G5XYactnw==","shasum":"4c322d6c9c6d41ee48ba8a9bbdb9d31ef4babd66","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112032204.0.tgz","fileCount":26,"unpackedSize":2638362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhq12gCRA9TVsSAnZWagAAeL8P/3F8qykHYkjgsDEbHV1o\nMCWKyhK5kg+FyA7wgoo7/P6Y/aiSQiBbNjzvg0h4DdAAcu+jsGLILnh58WHs\nNw+cfQUtmEfCdkcqI4Et27mWTUroPMdl7sIbNGA6zTIfXQ57MYqumM+j2iHI\neV9rd7xlkpmAiPqImnT4HraIpVaPvTboKdh9TPG2ibL6HDQSdbvcLJOVxgH1\n5WBGU8b4tawCFOCGGYKDm+gbPM/hc2mAXKP1bpa72THK4k1H+bz+lexJf69+\no5aX359W3fLiA3JRqcrShGQTKrlaAR7NVl0duS+wy/qpMllEY46YZYc8gaig\nWitrrTtkOG/dXvBriaZJLVOOnA8rC6dLPRiyqO/EnO2NVo3RzFGBtj5qI+OD\neuYSCFlmho3rTwxFSD7uWAXLhp9lC5bnJ2v57UetoD82y0ScmUc8tNaj8u9d\nIymDE+gBh9wONQ/qrwfEs4JUpduzONcLBDaJHTI8PUgWjLNF7Gtw25bRttGU\nqTcuS/jEfMzthIKVEkthksPcjmLnnxt4WGXx+Dq9FBUxzup64e7K+xQXcxU9\nbAKudID8UDo5dyVEpDbCXDENPWRDHgqgTqyr/i+qUEL0fgLJ2JF/LLX40lXk\nwVApKpQrBAval1EMSdAqz0F9DmQf3h5x80mzHb2j39cWxj74N2bNXUR3G2PM\nkktE\r\n=FIlE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBs8K9H45IZdlutyChauPk8GEB2ezPg4OA0+XmY4puPQIhAKN/fgrLjOWxA2UPvlBLbV4N6VOqtMWMt/sXIxoNwjHl"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112032204.0_1638620575791_0.3747645457484474"},"_hasShrinkwrap":false},"1.2112062322.0":{"name":"@bentoproject/youtube","version":"1.2112062322.0","description":"Bento youtube Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"cddcce65024c209c9420ce0567f525aef4fc971f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"readme":"ERROR: No README data found!","_id":"@bentoproject/youtube@1.2112062322.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-+AbzGdwNQqp0RDLu+0VdLci7FGDg8f+fwgMm7ees+4yV5UClHH3rs1rQaMBUXyVor88TsPi3b7kK9hTpTbis4Q==","shasum":"1020ed4336a7289cf34b67726cb95f8e910878a2","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112062322.0.tgz","fileCount":26,"unpackedSize":2642472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr1PLCRA9TVsSAnZWagAAaVgP/Agol12q2ZxlWSFYM086\nToc7tcDi4Id5GpBtZ/coedkSpemAjYOq8QNukOACRmfyfq/amA0JczSe9Qa2\nS/91r2uct/LLZ59Ll8OSzdfuC+AXGpA+Wb1bPP+OrHX2SWcqoRdu0oy9sROg\nL2NnJgq3ojyYF6dD6V3bM83wcwlhODkGKdyCa9BFbtzfDUjEbwrLhXVcjOLy\n8OwIcHTx7A/lrAQabmbELRpPLab16INMtmV0uV4IzRXc2cvKuRi5bJb4kyVZ\no/YtvhOOEmkYcd2iIhsQuSQM5AWIbJEPEGR4e/6sOkWrHP0Jm4fabOK+49U8\n0xcLz+pVH6qvINwTgpHAoeQG8NBI02BpaLor9VVlg4R4QDPQIMHYb1GR9aAt\nVA+4A4l6a/N9ZojSH2YSWyLzJoqr/wmJ8uNl4wNmfwYc0E9cWazClwoutJ/H\nOxVFn/OyvtsWqCiFovLBv4L1EcioA9qKnca+tCTSWGAXliLLtLpfF4ikFqm1\nQTIMZkQ9JrBEs/MHFtjhTskimWmmjMFT+f1atI5aSFFeBdyAlziUkeKKY4/6\nCqu4FMqchCOC7k5n+61Lj1dFEyhq96nGuB8YYqRxdgQg1ra13DCdRtq4Sz63\nMDdNUHpgvsbWQUeI6J9K8g1+bwXtUByHtx1ZaVzUptaUmZgLVvz2kV7otK6b\n6KQe\r\n=tOqd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaW8Tf907n8Lt0saXVUtVVdch5n5VKc35+9Z4Ya8uQQAIhAKd+l6CNZVz0Yt+TR4G8FEQLKbXtDmU/lGwVNIZVvmhf"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112062322.0_1638880203265_0.903466855145679"},"_hasShrinkwrap":false},"1.2112062322.2":{"name":"@bentoproject/youtube","version":"1.2112062322.2","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"3e8072d191c8771ac14d19f2122bba93b872265b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2112062322.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Uo3IMBQRLa6T5SkHxxnk0sFOh0T84e7EosQO756RBP0A0Zsqn/4Xc6HUDj0EQAk+CCN2hi3+zhD9zGoS1JD3pQ==","shasum":"a7d38ef8864c2764cc87fe536bca41048d801e0f","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112062322.2.tgz","fileCount":27,"unpackedSize":2655868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr+DRCRA9TVsSAnZWagAAYMMP/19jd2e6GLg4jGM9wn6v\nQa5Mhtw/CTPuRJg3JG8QR6kquFHvwnk5wt5wNVWfahom7ah4RarZrKypYf+E\ny5HUL5JBeRlPdrjnf7GiWXD3qGAMfXqy9PgzgrpwPtbr7fBAgFgBB3RHoVC9\nNKFcbZq6AK9m1bzkwLRsNlQlpLdXuBq33FJ7lWY1n/1daqViLbXSumsmAL22\ndjtDcRjw3UbMJWkSzPJbaBq1/TVL/Ir9Ko1VhOhYZbK/2VUCQRrhMuCbAHcU\n44LQWbI3D6Sk+powOWe3ntN4OwxVSNNWBxKxpa3GVwBLanTlJXQ0XwwHV+gU\nl+T5mw3tOFN0JvB7APuxfTsEQVnfrCrWefSSGfE/TEW5hrG2VXPsFzpyGnL7\n4Gvfw7AQzdsEMhb14QQByTUhtq4WiNHBWh0wZ+VAcf5Q6Jup0P1ZXrl5T5NK\nOVyrTsrDq1IifkQv99egyOWbU7Kb8SkXkE9vjInwBS/M0YlpUPlUuPjjSJdM\n5DT1cS31LJEuiK5KGyMkum3GyJGgTB3wFYKh1DF14lg/AMEnm6g4m0nnd7hz\nguZCN0HxMl8m7ljDH4VuMATtUiCMxXid8MKlV7TYRNy2KAqiW7GuX/I2gOqd\nvvahjzUKi/mRh3wF443k9sUHhZSHaAz2h+j+8itgu4upAZ3Emr6hWVCXStRl\ngSeu\r\n=0J6t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDO0vCkKLDIrjAfGSu+KMkK/HBL39mLUKD9VgkYhRyC5gIhALRxl6o+lQ6uhADuiAgYV70RNOFmqLqHTjcsOUZ8MZ7y"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112062322.2_1638916304958_0.3861531083926799"},"_hasShrinkwrap":false},"1.2112080230.0":{"name":"@bentoproject/youtube","version":"1.2112080230.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"6d03180e136b7ae380fb9d5d3d6fd8c0d5b28e04","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2112080230.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-zdpq2TnNcKQjYVRw3RfPsg5AuT76tVPv4NQSEhzo4MlFVIYGNokzNPtV7CSOOYDxfIH5wD8atJRCZ/IJ7SIGPQ==","shasum":"fda39ac017f5c1d79bf363678b178f0b440b60ab","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112080230.0.tgz","fileCount":27,"unpackedSize":2655868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsLIWCRA9TVsSAnZWagAAKP0P/jTkr9QpLGaJgydEsqP9\nDAJmqYmq8B5HQ0PeahX1dOx+AyGzHcypStpmU11Ne9cL9OKkVOi7n3Y0dhgy\n0NlfeInwu0O6/EhrA0S9sj/g0YXrpr/fTeLnJ2mluNjVP/uZoi5x0vqZKjrR\nMR1F2yQDJjcokJ3+WT0Zvdnle+MD3VLMlEnZSiyEKHSsQzqmhY2uGJxb+K/N\ngI7gK3ohHF9WGh3+/NHb/qr5lUxw+iltNnPn/UcWXg0c/4O31bpTJvW815J1\nqDPvHZ+YlrOmJTOWnmuct4fTEetIkiBKRnGxSYpEgQ5BfUjwQ0iSfvvNIvet\nXFAS9e9sSemHscoSW/7jgWuDDHOGDJOVqNmD9DLu7Jcxr2Bx7drf4t4Z5KPR\n3kaw2MbXr429TaosUOBosSZolDgWL6oSai8r7i0ro7cz1V2Hui8qXCclQ4p4\nvAQjbL463z0SRimGOHZtFwO5o81nokafVtSD81j2XdYvR9yWz8pSNN9tKXPK\n4fPQMvzO8VrNYIZ8jzAvkggJd2lPszkNd5wVFVBVXrxaZ981waDGcpjH2AkA\nXRPwyh2KJtp4VlhfqR5NYbsplXp7zjmS+N4HYRagRjcgJir3uCUiS7aCWEuR\nMzSkYbSsfSGzf2pWX4LID0vWYevJhzbgMtWQt9oQ0tKN65lZBpKKhMSV7Ma/\n0Ul0\r\n=u+Zh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEUdNtfTnWFlXFO9HcRZtSsCChf4dVFqqFH+RNSHLTKAIhAJybn+FkBXGKFQznv5c455pAlBObxWuZEgUJd9+dc1sx"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112080230.0_1638969878668_0.9209064200420811"},"_hasShrinkwrap":false},"1.2112080230.1":{"name":"@bentoproject/youtube","version":"1.2112080230.1","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6268ef31f81697778937a9d77d4ccda3a561f39f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2112080230.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Qzs1Avlxbp6WYUEbVOGycts+ZAFJ8IJcdXwDsuQWkbniYBxcs7MuBoaLAH5FA2AJIsY7G/DurBeL74e5Qv7fAQ==","shasum":"e7a80c5b86f5011ebb364a0561ec84b65bb5a825","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112080230.1.tgz","fileCount":27,"unpackedSize":2655886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsNaKCRA9TVsSAnZWagAAJt8QAKQCsDW3lZXtP5Qy2IOS\n4ghPSMIiNuFno8KNiUvKaAE3CBME/1kMNb1VpZKj/3hIHWydTV2tzYeR+E+J\ndoOEQnQ45nopfdU9d7eGZKlPwdQK85t2czmJML38X9t56lkq9f0NHi6w7xZ0\nvocN5prR7CM5oXX0Fk0AHj6t0LJjlJUbVgi1z9WC7DfdFS4m1eBZyqQkZVUG\n0Hl1TxPRNkFPnf+4uopID7Vl2T0sFB8Aye9UfFm3dL6PD2k5ffVOQlg7pUJn\nHaoW0veRyYC1ICWCqS5YUmCaXZwAw/UpBOermc8iPowE/FHmVjv9CxJUwg1P\nrJTxTV5OEyrg7/RnlhIoT9MdDX5/tuko5QdbidY1EnOjT6oBAb8BxtKe6RCX\n/jF4xGvAauJS6FciJz8KfnCuSUb2kcq/WEcfVOQ9qIgkG14zF+PPCJcIC58u\n9/AvS9Talpvpkill87186tVMKKKnOhbt2/FQ59J1FwXgjUzqgKAV8h3bLVDq\nbOs9sUl7uWbJyXO8vRvs1TOWTIsgr8bc4jkF9FKPLkgB4b4s7iwRp/IATX+8\nhpv+jpm9Rl00oWfUplCDaTTjtTbw6rLEVyGLQhmBS1/1fsrXJxEqToGMILL0\n0OROY0spyDtorvvY0+ttkhvicU7LLBrTFIB1rW4liw8YtM0qBE4wfxlwg8WZ\n7mAR\r\n=6RiP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFY/E4ebBvUpVneuPCC+dwxnSx8SlkSrDKGqDL28xoMFAiEA4VMb/63gFSQLlZ2W5PZqf6WTtasaInFa0ISbsfG8TGs="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112080230.1_1638979210649_0.7419463992195179"},"_hasShrinkwrap":false},"1.2112082232.0":{"name":"@bentoproject/youtube","version":"1.2112082232.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"b7b1a9f9f7f0773645f4fbcb9a550233900046a0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2112082232.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-bIefSGeWfxwAmlVc672paOiq9GyRW5/Av7a05aXtoeYlGUotwqX3VlkfdUpu156arpy/4b7Fij5wnl+b4PCR5g==","shasum":"025f4a8144e2d13602585e9090e4e375910a5124","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112082232.0.tgz","fileCount":27,"unpackedSize":2655886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsfsBCRA9TVsSAnZWagAA5IgP/1lBsuRadyV2e03oIDnE\nZDH8VQs87QMVL4YpikcjdvYMrHvvotmzYZIu1u7/cFLbWphUSrLujJHYwolB\nXEGBkWbARfDDhGmRWWrP6ITMiMMcfvol+1RUuAu7o0H/3qXa1YX+rMZ8Yvpt\ncIJHTKsDlaaPKF8B0BbTvVM+50nx6wE5h9KAIAjCpmyidjgKJufeY3AOcqBg\nxGm7sdkE4aWIZOsuA3hkIlN6ONajt74XIjHeBH0+liF1UVhwGD1GQbF9tZrJ\n91ceQrHrPd2veezCPqmmrjwkh+Dz1X+F0KdUeIbU76VKErhpg0gb0Q9WUG/g\ngei3PW6uuPrNW7Z5izRh6l13EQC/8r61gxwe9zYfqU3tp8VjjBa8MrBgFgj1\nk4zaMsy3UH38VK2gdyX5L0TpZykBD6jgpqAzQeiCWBZZP0S8HwsbjKOdP/Ot\nY0ljdjWaJHVOKhySqQ3kCVessu7orUUqpFXHT+Au2BgppRNMKkw1hZrLIqn6\naE+wUXeTwMq2wZ5R840Q/+1BtKKhs/dcSBtDyRPcXmJJzcRi+2D8NQnX1GPE\nNa9NmHrEVZq5Kw5X0tN4HeMg7QzLL/hU15uONq406L9+tbPlV8R3UW4XOoAU\n5iTOws5cwBU1mc3/z6MHJf+chaFJJEYcd4/l70XtgoJHIauqnWimbepgjszu\nxsrm\r\n=OFFR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3pJVXvt382ReJXLfhZHc0opdM25Zl1mhohdnyAyUQsAiEA8gmzXJqA/VZUIrc1d5eT36NSn/t2hHKOpLXcJT5xz8g="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112082232.0_1639054081711_0.24365087273658048"},"_hasShrinkwrap":false},"1.2111242025.1":{"name":"@bentoproject/youtube","version":"1.2111242025.1","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"b65dbd2c132f8cee302c477f3a52cb864a79663a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2111242025.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-1y38ddm3QrD6LSqV486xGtiNn9wMech9JmNm8Rts5uChOOXhhESePmeJxNJ82kILa/YAXA04LnbLY9WH2IwYfg==","shasum":"dcff8d6f1eeabe23529c2c0ce3a904efd1d63875","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2111242025.1.tgz","fileCount":27,"unpackedSize":2715612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhspvNCRA9TVsSAnZWagAAb7QP/3EFfTT0QB0bnHwUv3gH\nfGrZHWw77rInPyRwUO5wy3w+/RC464mlYIV+wcHHkmEjKqchrqL3JvuORUXT\nn8ACwo3c2Pi/fVPtNW4qQ2KMdAKcvOj3zdJlqqvRGXqRDTSadAjoqzDFl9dP\n4+Sm0j9a+j8viHZ2gnFzInREXbfZbp6TKGl+gqu6oOgj+R2wc3vUeo+mk5Pc\nMqvBg3lc32aceai9Zrjs87JVsImRT4IxsSlbdNFJv79NhK9QOuLrmemJT8+m\nfCYIfDi4WRqup8YcelBUhgOUI36RnTpoFs1fx87nGAzNGr0CsahwwnLAh0p6\nsZ6pz7DpMNjF9RSUZht7YZanCWLtUv0/XzrwFl7K42qKv1tpTRCDVOTueHf4\nR738Hdoh40hnvNUABGbPcUIBxB2MxqZwo+a1YdZv080BA/FXzG2X7OLtdMr4\ngpzZ9hAMEpsLBx0il98lXulBldbA6wwmcIDc11L5a58q242VLcjXXTnOWoOo\nGPZ+F/CCst/OZUagdhbe1Z0Clhw8dwBe35VCViHEo66YCQzfAwvn0VhoceSC\n6qNSB+5TQN1e3G7vApSjGoZukLV9LuTYdQFlDqvzASuwSvbVr4k1N2lZjoGn\nIpEFoOzNNavaSx4S4IXqbjDqVYNmsa7JZ21aq2Mmt++OSpdmB2iztHIr2Ps5\nCx5n\r\n=JLpZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHSRz5liCZ7MgafjcOwkznfKFV2rou0tnya+JWYBwD6wIhAKLlKoRVeKuFq/cC6pc9yovZkQT3J+1ADhe1dE1A0TVY"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2111242025.1_1639095245649_0.17086075797099065"},"_hasShrinkwrap":false},"1.2112091956.0":{"name":"@bentoproject/youtube","version":"1.2112091956.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"b65dbd2c132f8cee302c477f3a52cb864a79663a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2112091956.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Oq9hNtDJ86o1Rd4zlM7u7lT+XTvSc+8JNPWwjB0EUrtq8CIye/noNmTAbc7BTRMPgo9yDDYwStjdnyHymkWaTw==","shasum":"053f891200639342708e30e912181e8424537157","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112091956.0.tgz","fileCount":27,"unpackedSize":2715612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs0zACRA9TVsSAnZWagAAFQwQAIkTkOnomCuBTtjKOSmC\njzbjl4QE3/nyJrdwecVsXABo2l/BV5wTyczp3JzVpZknZQEXAkyQuNPn5BA0\nqaBwl+M/zMXlGBzGtcE5Tr8ePGJzi2KltbxcmJwaP0iJQMCJBatz/kYZ/dh7\n2vtNPExXGCUH2rNXyBdYR1zTftf4EsyET+jxw51lT7cPd2cHRC7TU7LlUxb7\nJIkfMN4yeu40ZwqnTsRSW74ML2VFg2kqKwkJE2ny5lYzKxLobwTb8BJwpoz5\nrBZ5kwb3ZupwHPssJm58y8dYN2B8qAjbFH1V8SJVgquXVyDlk15zdkeyYssT\nCULFIH6dAl5TSOgX+sS+H2mdopC92g8xQAXGxSprT/hV7924PUhpDL+bN7Zv\nDTob3+kBD8s3iUKad4cEwtPIM7MoUiGn4aG7hitPW5HHy2U2Daowtpq8tH/Y\nyQd2PnfBQX/1C+OW5eqpBZc4s2sTxjPsqkvteAlFn4XiaAt1tux97SSN9ay6\nHy0GG3w64STiygd+35d1FwyTL/h84e15tl7poAJZ4Zh5DALwOiZjzuu7h27w\nIGWimMZUpYYdmieKWu38svTBKZGgHiBlO+BD+PVs+lZRkfX87z56+91sF6Lr\nmUfbZ3jYhOdns8QTeED/nb42Dohlt3/yRMlOrhpacOXwn6wYQ0wPIenQaHDN\nSmqQ\r\n=nmAa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/ZUimllKKH9VE1MyVDrYzVEMkWYwcafgCJu6lssDN4QIgHGgKOxGrI6Eiyd5bR98VWhnNJ/w7j/KJtEelMLyfk5s="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112091956.0_1639140544013_0.27343696251156846"},"_hasShrinkwrap":false},"1.2112102136.0":{"name":"@bentoproject/youtube","version":"1.2112102136.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"07236921f8e25ede71217e1921f8aac93c30ab6b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2112102136.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-f1Ls6ihTlv/kZsNs+nuO/2zwxedkC2XEGwDNoQ0Rufh5Me7i17CW47VM0u8W/2/qhwxSksBe+JMQZEk73Jnuhg==","shasum":"301a95959a64bd1b615013874cfac9f89f98a676","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112102136.0.tgz","fileCount":27,"unpackedSize":2712768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtJq5CRA9TVsSAnZWagAAju4QAIZSx0ou60Ffr3Pz2cA7\npTMM0RxwC7I6vpaaC+blqlwwWxJWVYcptxsfR73q5umJP6c4yvnJWzk87PoH\nOTmcdbdj3RsFdrCVu36NGxnaAXg8vbw+EnTN3E1wNkHGZr2Eo7DkPbbqEGLL\nXLAJyoyI0Sa3WsMoj/1J+rF3N3vR0KltLNgKnA/gRY9sBE3GOmTU2y4mSqIT\ntxh5uqjde0Znx5xub7hDqV2te1bwjhguDkeWouq7K2wz2sUMepsWhtj1VYMQ\najzXLoXnFjsaNowUD/f5D3nHJOw4kOtjZgSPOCUNja2dedxTXPRAvfF3z5Ic\nJyBeSIqbOeBfMG7EBEiFsmBL22BHCPE45FB3uURn7RNCmLcMd/bMqeW3dS6Z\nS2y8GSxSvRt8kV4+u3F8xm4t6eCQTS1Xd/9yNLVl7EfI0yoL3aj4XCyXMyCF\n6SXpbI0FcdzbHLbReq2KcQ0tqAI4IrShgl4rJJT4yievUgKoII0Ouhd3qwnE\nbnYmD+9Zx0umg2o6xO1shcsw3YEQHD8faAuykxG/EqMUKVc5fXj/dyuVsWdn\nZWjLiO5YOudw7RJi33uN/IoUBM4E0xtXrfJeSppKoSgFrcbuuWmPJsAjqVrv\nBqKCz2Sf7/tTjdTWjdHiJlNhx0CHbibGB5fUtCT+tk+NWRuCjssgRqZel9Ad\nB6Hx\r\n=S8sR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHGHfb04EogwRKQJuQvnkGgOb8KxA+OVdbCYobatHrvwAiEA6TaUfFzSy0oofOJ7xcsvrhLb7l8N8tSIkf5wGCkJg7c="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112102136.0_1639226041428_0.15140021776698598"},"_hasShrinkwrap":false},"1.2112132331.0":{"name":"@bentoproject/youtube","version":"1.2112132331.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"cf62ae1d6a12b70dfb6a7bd8ce66ed5bc6e30d1b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2112132331.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-bZQOvndIWbgV1hQDTfbaOrFB8Lrt0VWLGmjg20wa9phpPRM8adcCDT7fBvN4uN8qWcd418BLqe3UHtGUmnZuQQ==","shasum":"db78797d56d304719d2fe483a83dafe75da7912b","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112132331.0.tgz","fileCount":27,"unpackedSize":2711701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuJW7CRA9TVsSAnZWagAAnAUP/iUeGVsg3zqPNXLXMqGU\nFcdPMM/QiKg9vmlgsJ+me7v506e6f5uF2diICYDACujnUCrKwYX0jJDrs1R3\nm/isXyExxms3Ah++mR8y07rdxU7vJihjhuV2IXLrTFwPMgh81XjLVx1abkTO\nyu5ldgvdXnv1hmSpW1LN0VBb4kioU3BNrUNw/hOwcfnWAJKWjBKlF4aa4ne4\n/afZTBPiDfCUhfl0JV5Sqe7vMfpt9s2v2joPt1ecpBJObdYnejaofViDrZBb\n0HUWGBWvUiBteu2AcWEn1+wtYAgKXTf2vpcIdMRUGQWBKuUXfyug7pLdum9w\nEMGrz7A/6xgZjLjIDZvrctRr+kUS1pzvE2PayFiIpC/1LATnFWj3TQ3n6WQb\n8g5DG+cWozHLQuAZSr7nRdYNDpEtSkKvZNQEzy+p+KSPvY//pR4bwAIPrjzU\nh1a3g28ySet+mxewCQbSkmrXjVV6HLnNBZayAHgcawEikmbUa8TvqRyradde\nU5Ytdy8QywP303wm9sNkiZMZ03MO4+006eIGUtZ0QOzo28282zwPkwuQp0yv\nQMjk/r+sv3gG9EsXLa0T7RgC+Zaug8vhDtTM4k6K+Xa9t+YPkMeMT1FgFtxH\nDG0o6zEByah8vOeFMi8mqb+QXAZ3NdBxG9bWJhEheNQiqUY9StmLjCVJgrNZ\n/SqQ\r\n=8Ag4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB46KP6PLa0nlFY0L9O/GZPfgm61UXlsMUDW+71Tp+DvAiEAhq0JVgDfxAEbOGmfd5ryMr8NS9yWnAhAHIWjqGcKNsk="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112132331.0_1639486907482_0.5910052999098785"},"_hasShrinkwrap":false},"1.2112160003.0":{"name":"@bentoproject/youtube","version":"1.2112160003.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"2bfd164830b15f49d7d86cf73821410a039d9039","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2112160003.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-IPHserlJndEJ8xbzZOwWz0fknLnvCPAb3v1iehCFSXnNZ00rxMPeOVBro3JHL7yVVhD7CbOf1q6jUChnUsCzjA==","shasum":"5b6285c388c8c42fb1d57c93771bf9224c1a7af5","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112160003.0.tgz","fileCount":27,"unpackedSize":2711749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuy90CRA9TVsSAnZWagAA5m4QAKG4PL99m2qsQd5Bl3Jt\nMKv3FlrRS068vlsp367vnSik3dXEUPRizaKfN6KuuzKqODdp4hDl9Gpv95sB\nQqXMxv0cPkwpmI3jJ49mXusHAz/0ROMvZIgRZ83b10TwoJir2Rcgz5m9pvEh\nogDIiTDzIzCkEzMfhZ20sXjQ4Bqy2h+sah9nDPEtnfrPeTRK1ZJbioUEiXQZ\nN57vnet4ouWyPjWRyYX7RbGjyqWzk4XXf9lFuuManCV6AdZCkCIcBOoTHkSw\nz63g/jNCYOepci4CXH5yMZwnvIgG3nWvAyTs1OP8LR6v6EDmQprboAHZUMM4\naKAypk3BLI7iDVYp5fxgYAIOSgIGserLesY9TvHl57jyMP13gKWJdiWAQIgd\niVTbqmOpzJeokDOOMoFzgbagekKXfKM3TeFOq9FJVcIuAMse6j7rOq2BWQhj\n3pV00FE0oZqRjIRr6GJjXBbJQQgJvTP0LXSiV7wbkPlF2QhXYog+r6+86nDI\nK22J34NSvIPKre7nT9N7IA63Pr+JDE/wQ7mPTc4YFK/bbnh8DUQOSOZGciDy\nlAsGz9wrUcoVyeN+R9y4Jvqnu7XRCM/PY1BedzaZMdfdsAO3A7FGayXMH5GK\nqR+ybMafUpwXo1NmniVnp5YUNqAvvXify7fQtI7qgeMZeKOz+bXs52451pOT\ncjYW\r\n=D1PX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtM7CzJHsl2Ift7sBP+ceD4I3oPaX3HFog0IEIycexjgIhAOGTsxXS646wyl9Fcl5OSFkLEkJVb3eky6zfU4ZfnNDX"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112160003.0_1639657332391_0.888088110240072"},"_hasShrinkwrap":false},"1.2112162055.0":{"name":"@bentoproject/youtube","version":"1.2112162055.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"e3242ec094a87348831cbdd342f5187068444994","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2112162055.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-nvEl1eykswmRydV1k5al7IpKWFW0D9iwa1PsOzXC1Xtl4TC2M7XQoKhjQxn7YmkZWSiXg8qm1xFJp75XkSgBXQ==","shasum":"a1ec307984aeb3dc90e1b2eb442961953d175010","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112162055.0.tgz","fileCount":27,"unpackedSize":2711461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvIBxCRA9TVsSAnZWagAAzgAP/jjPoSTj+xxi2s6mNAI2\njNblAmCK+YkVktgQJUUkg9T3Z02y+FgUP26mYnLYemb3hWfZCeChhP8LoyWv\nlxZF8UVZYdmpsMRxJvU6OgSlm9e2nnxP5VCp5VDWnECzGRhoM/+rhBmGXFB4\njzkVOspAnA4JPxpd7dxl6PhinqVHBHRNgA1tvKGHsYubhHKNuYplm94gMdYC\nL9NzFnsUyk/9qyjQN/+HYH+JOwbQKHdmpV/zsK5omrSNZOUDbzJDDBZwMpXc\nhJdMZCzX0PQl2+91jv989FYYCxndSKPvjrWrIun1Ty6ieL3fOuC0oklUSSjp\nHCflgaHVYNHcZGVrhJQZ0bsk1wxxi+Yix2IuOs8uiwA6EtkkvoJSNxcKZCMZ\nowxSXSfBwv7q/aJd8PfO+KE/tPbv3cWzVW+T15Uh1sufndANCKYhKWBJfept\nGf4wTdHL2azxr57OuwVSc0wueICywJ9l74NZWH35gAKNk1rol5dN55IdoZN8\ngrk9zxYXjJQMt1wmzEYdYu8Ery85AK6HzT8eOLf2sop/VvMThICVH3xpzBhQ\nFqaPL9Y1ZDG9Uszs+xVMjQHSpbte5uLn1NXS/d/gjNJCln7gazPyTFiOS2f2\n26NvR9tdbUuxJagp4YD1NJcoP2zTggPdVHJol1lDpTGqDEqzagKbG8/ZyeYn\nvtXa\r\n=g3Wl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9MDxhUWLrQmsOdnbN+CxyjwmP0hrDDjMzdMjb+MWsQQIgfOhDOHHUOOJhbTGjJrq2wZM7xBcqfERrSxIqDYVBh5I="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112162055.0_1639743601131_0.5332200584328357"},"_hasShrinkwrap":false},"1.2112170012.0":{"name":"@bentoproject/youtube","version":"1.2112170012.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"38e50237c04e29792bd0ccfdc13308940a873817","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2112170012.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-SAwMNL7AHwGV6/DAcwGA7gObRbykUD32oqjJd69tkIgqluMcPXTokPKm+uh1v4VIKlrtqzoC7/nbdvT3YIdafg==","shasum":"fbc6ee3999a79f0d45f910450366cf0113291425","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112170012.0.tgz","fileCount":27,"unpackedSize":2711461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvdIMCRA9TVsSAnZWagAAgs8P/0ZrocV/OGKDKype3ZLW\nz6QH0T/LdCureL8KN/CXvHZfBEVyM+mg705caLgY+3Z5JLkLINgvbdu46U2l\nCWN6EmCSdGmPrsR02epwGPUG+opt2el9OKNvqQC6UZi/StT/BcPS/vL0/1CJ\nxsBZ5M0LBbpZFZKguNLltIlNpiS81gXNfrCZlQzUcyYZDOlzsSeuL9xytHIj\n9dOrXuRdDdRs8pqOr2eMSybT8bVqQZvyPQxN1VSno54OJMB7MFoZIQaZjwtK\nbClTJJc5lWJJZd45NKHWGCvSrzbdP1NtAkmIUowpWtErLI/7D/tlesQBM6Xr\nZ8FJKN6XdazB9/sYVIssZVjfB7KvMRaxLsL30iGz6BXWIH3x035hFBpc8dTx\nu4FKqKC7PU/ncqOhHqb6+F3b44adb8F7nKg/htxLKJ8KQ8XTgfGb88z9mAca\n+aNGQtIbh+YM//yzGy+sFJYY7QUuFLVxVsuJxDnC8P72j8QIWyrjp3pVQou0\nmGNu0noQrXyp0L0wFLPcPjzudQvrtk+JFDheyLt2rsOof/AuIzr6M60UzxtE\nk7LHBwr5cMGX4tAeQaMNK2vwx9hD/Q3T0Qu/Vyu89oUfs4C08FPZuNoQhOmT\nfkI69p7bFLCKGZqRHZlKLKTOob0XtwzRkpAD3sfgGaoC9ts48WD8WnmWK7ch\nwoPd\r\n=LGAg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHY0n49lDTJ9aoIjOfTpNS8KuwAvQwDxHIU/WumO4pf9AiEA4o+S5u9cCD9MypIEIppm9yES1YW7U7eSU7AP2jU6BCk="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112170012.0_1639830028512_0.25773259616301725"},"_hasShrinkwrap":false},"1.2112201724.0":{"name":"@bentoproject/youtube","version":"1.2112201724.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"a8be9d1eaab4dcebc8c170c9911acf0c8a5e73c1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2112201724.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-TW1oE9K0erqfQrmPC4cM4dEGrYjEW0+oh5krPJf5Md52mqE6nNN4pZvmgmF7IzQzvrBnMVsNAI6B9EIPUYvbhw==","shasum":"80395ebf097e5ce2a5a1268d80974e1e8beaa5aa","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112201724.0.tgz","fileCount":27,"unpackedSize":2711461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwcdSCRA9TVsSAnZWagAAV6kP/2+I+D7bYma2r89LmMYS\ns6WuFQfgyz+SgkYJRj0X1+LdeSjE0PKStOeDN/4xaZVrvfv36e2PXHyebkgg\nBy37QJBtxZBdzWunb1s9iIaFE0AphJyjn0vlSTwv/XoWilKRDfaJ6gW3KBRj\n+DRS+1LuIfcBbe4YBnH3b+HOUdvigcYpXGIbJoErsk26OvcvHb5uWigoVGTJ\n1iIpCg1pxj3QkkJDHiSB8bdo14uCAaWVmx5NIgV86vOS9T3+/20iajd3gnQ1\nWfxIKBDf5HxlMVcKt3ySvyl4Dh/3g3fLsmG6h77qeWPur4qGQQpd7alJfXV1\nQoGWul93Y4ZRaChYde3a2TnK7eXL9N2OvJc1VzzMS6cMIP3jPKsPnxSJuN/h\nXbrotu8soBVdieIJSqxJZNFPcul4TA8jDg6/+LzZCCuHhucoXX9uAFYQGDJj\nsWyInROQvnOOUgoR4G2MImlfnGB6MLyDOhiHpbAHhRDOCYw2agLhsiPz8Jb5\n1pYwK9CeKJGv1KvJaxq+Yv+sJt6LdH30NtHJX5iAkEpOalO0r8RczEQkHReC\nmY21rYllYpVKSuvBttTtedHfI2+bAUtYK0Rv8urofemGxdHUPGJ5bP66TjL0\n+FowBjk5cNHYNrerycQ17Q9Oc8ko6/fHOX5i7deWttRVRJfCv2KE8+HIVzv6\nHmMB\r\n=jFAI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEHJcURvm4EaYrbI/FehLf+vw9Cqvr/0+ryPOVFKheU9AiACnwr7IwJOXppBKowJNCrxT+70PeSbiVjcgdjkSEuJlQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112201724.0_1640089425908_0.4938023156025484"},"_hasShrinkwrap":false},"1.2112212349.0":{"name":"@bentoproject/youtube","version":"1.2112212349.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"a6b6a6c259283b2cfcfb474966602c2ada072484","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2112212349.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-C9i7EdNqVfUluxhG1QD7dWKcohehjrKOEWAPjCQ3ejub+GnUh43BKiQH8GWj3GbMPytE1j1TAJvAN84msU52Bw==","shasum":"78f4185f6d743ed38a54cff653438e8d9f47a7f1","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112212349.0.tgz","fileCount":27,"unpackedSize":2711461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxlPCRA9TVsSAnZWagAARQIP/2xKiwsVGHM3n9fDLgSj\nj1LFypZYa24KMJWCLXhnYEdkbzYsS2g0DcLT7VlLVFN6oMYooNykay30r3hv\nlqU/0o0nQ1fFh7Y9AhUrJQs9wCMHM8b9OH80VW2EQSgb69xufbZlfsL0hifW\nt9u+e/Oyih/yGf7wFTaFJXgfGXN1zzI5s07FwvwbZeSjv3Mp6kWWxH6824Uq\nNfdpbmOMMstszD5cIty/BEqDxkx0SrLJbCldwmxBLufefOz5BFYTUXsUA4hV\n7EKPXmtQC0wxDgWoWWxhFp5FFTGHQAW1XaI+GOulnMoFQksrkVYzVs9PtpCf\nWPZ11goPGCDHVGJu2uvoS4Ncf/+zZevJeK7Kfjrd4TraipxLoepg7Bs2JajG\ngvl/l7ewAxKXgmZrKI2efCDvbtOPqEZA66wZAxeUO6QZdhCVm+YHIaECst9K\n/oARr0lZRU3n7Fl1bxX1yz9PCF1dgNldEaQu1ybdSMH2jY67CMz1wxLC5i9X\nf9xcOnzPPvI+kPgS9waIq3NCSJvaw7McNmmPO4aVJAx/5SLCL49ULAp2rYYs\n1UVdJNxxNY8AtGKolUt4M95Gv/qgiTKu4MGGI/opL6UttOXfNLcZu2YZhBE/\nSpUZYrEfNQHZ8Nx6ooeO+QdDv9qDIp9fK7qmG5nWka7mBCbDxfSHZJ7isw9g\nIUfT\r\n=3Saj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChhojDllIHJR7rwnH29gbbHjNCBLXc8qU2pgBHCmO0jwIgeExnwXth6CNC9YWodi0IGAKBEWEuoj9vM3zmq8RLxts="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112212349.0_1640175951292_0.04847228008976656"},"_hasShrinkwrap":false},"1.2112221739.0":{"name":"@bentoproject/youtube","version":"1.2112221739.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"5d282652a97695e5ec57a655f76c0cb6d40de066","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2112221739.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-JFMfNhvwk+K5zVSIMXLN1oLNdRN8p8c6E4vDshrpNxz/KvaHwEWyNAgXJooi2p2CkQK85UT7IrtuKKYHKZ1HCw==","shasum":"bfb9196722bdfad9fc7a07a141f7b85368429b90","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112221739.0.tgz","fileCount":27,"unpackedSize":2711461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxGnMCRA9TVsSAnZWagAAGBgP/AnJXpBtaYW4xd8jOxWQ\nHsrZyuHGfTQqJ9KjJAn/+MZ3H8nND14eY0cH8kH/CRiVcJUlPX9OPxxHCMG7\n0VQ+2RNOOVddiyVJR+LwyqSsvGOgDKxW8BRzZRXHXKp+aMWrk0ZvcAcCuyrm\nlAJGrIiPrtwtRNxfBn/Z+QTZFidqhtcYqrpg0QWRMblaheCmWLoeVMf+HJKg\n6aKFOtBJY0/CV2jZDtOy6VP6NJXRdc43eKetH8udjq/XWJEZrHaq77V16dDA\nSOAG9xNalBWmu+CY1RGDnxPR537kn7rFYlpnDwdnH56eLu/pyPYsmPX43pLy\nbvsW8W0XMmrvJ73or75AQMjRU7TiqAyvJqz26SSWc+5LsHaK2oTQ++WjWuiN\n8nhKmefSGtjlaVTIkdi9Fj9II/SO8OMRXeXee0Ws5k84tbo4w49OB4ZIqiia\nOxnT4Mc5rnTDz41ZEZCh+1O8YtHaATpbhNQDFW0SFuCjzwal7t0EBTOQI4Nm\nIe4QF9CC9xNfz6WNsF4IJqZ2WDlYxPKBvebBfMYbCqtHd2WW4X52+yuVZ6Mt\n9x7m/SUOXCslwxY8p03tiaTP10BysR3HEcH2arK5AXoclBfp5hwVhQnryzhE\nhEutXgWi6dChtdYzKXeg51/vSb81LGy4TTwF9xXkWg1qax+1QpOsPig4sq1r\nS+5e\r\n=sMpf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICljOmUlExO5BpH5r4nhjv+Umh+WRBnwvS6AZLnlqjVsAiBbxCSSTnNJUIBJmYtOqGqfksf70jh0wm/pHzjBP7C1Xg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112221739.0_1640262092038_0.8090773568939302"},"_hasShrinkwrap":false},"1.2112231523.0":{"name":"@bentoproject/youtube","version":"1.2112231523.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"3d06e61b6949affa49fa2c89bd550777f0fc8c3a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2112231523.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-PnilCbPoIEy1iFh69ZzkVuJe+qYVmbpfXVooSVYeXAIWma+P3UCVJ2iiKInjaRsZiMQokHMa3E4cd+3wTgRprw==","shasum":"65f9de3715d43cf4f9d1721d71f82387ffbc4ecc","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112231523.0.tgz","fileCount":27,"unpackedSize":2711461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxbusCRA9TVsSAnZWagAAzBoP/0iYCJqoEI0awsgaVJCz\nDan7s1rAdPgGMkf9o3l7804ixzq2nSZ4rBcKkL9ZjKtIkIV3FBaWiA74N6G+\ngjc6xh04fKP5GV5vA7iTwZD7NC5LiOsLGAN8BympYmsB7aTfUKydDOOy/Eia\nd4uSL+gCJd+51nb/JMc+qXKEFiFyj4EGDO+NuHkZ/XPyaDI9BGOFpkueguDx\niBjlGgEyYCRPZv+x4gTE9G/h3CP1xPyYj17j5KXRusJMv+QdiDzH8HZMq6El\nC+PR8N38XydMrWmskRPKFPufAMbR3iMNoSK/N1rC7Dvqq7SvjRUtxw9eloKp\nhdZ6WkwDUbVpG7+QE9SyYvbAqvXmH2jsoZZ/clMih9JTIwiFihuRhIuJRKCs\nfpH0F769Um3WWGqqM8dnJpD8CubWhSTyqNLaWyxE9qV5VTfrHQQ8Wyy6OQ8n\nLSJ0XMAfJYLLwXBhWVQVhqPCa5w+Q50oNjwT5bvDGPsYrZAvfINpsbiEW9HD\nv0T7m/KvErB+g9BYGndtPUese8g+gFsnRnO6L2r7AwBzA1tUqUJLIfIg/ieg\nDf7mKYJ3tytSb5P/XwQUTgA86HS7e6JFU9TcnVZCX4L03wqqgS6RGumY6qbJ\nSVk0pU0FkomDnqcX96+t1mMP2ndna6uTl+V8noI+J0Uqn5xgh5+78mjiO1mK\nryqb\r\n=PzNM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7zFasgRauOaM26Duc1ExH3PdTerctcSAZu4W2U9ZmagIhAPKGjDgAkO/X1Hw+v2uefK/Y3ZcAfvbzQLoJsCBBdNCr"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112231523.0_1640348588609_0.04009979836810973"},"_hasShrinkwrap":false},"1.2201042109.0":{"name":"@bentoproject/youtube","version":"1.2201042109.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"9526fe41f7489e55b2e2a8bf52d6b0e4367e19e8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2201042109.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-b8Km9NO7fQWO50NpA9tckvvEwW8e0bPvkuAPCbjiZJXX+jc3UDcrJYHejAxPUM+9jnuQ+13MXwCzlCzWGcobGg==","shasum":"18fc2fe603708867ea85aa1d99190d1b42eb5346","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2201042109.0.tgz","fileCount":27,"unpackedSize":2684585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1ZAYCRA9TVsSAnZWagAAy2kP/Rb893Ea2GYxvTtD2Ssk\nxt+lPgaWZIvd8VYhEde0YhC4kTa97wGVm+E2AvpqbdMqc7TH8+j3HDEQsmr7\nwIBxK0i1+7DtkD9XuSM2wF7KWGo3kTgVp+ffKnLiSvyz/b/wpy6qWVLgkpup\n3n2Gm8Qs17QZSVH3STWHpLGRmFo1DwjGQCc8vUzpTAVqIRWZIVMy1VA3kZCr\nXV7AWH1WZL6fmCl1UDRqCjXFX0/GZ72WPGarLy8xMuS8LPVTLTZdRr/rbrl6\nAgSivy2CMF3jJ3kzXY8IRG0Alfb9G2ykBhpwbacfBJcln7k7fwoFFXao2Xm7\nP8Q+95z20MzlSUUpMgYMOLtlpU2UdTgNL7YwyLLFkDNwV/IyAdjqpMc6soiX\nX3xN1YSseVLh/9vtXjYvwH4JYzY7RqikZ77fFTWYrpRqFNo1J/SAODknIr5K\najs8+GAeN0skXsuASyHpuToJ6tZC6lupa9cuq+KPvP5bcqIHF7lnNHTMR7cF\nGTlmTkHU4MSeSveh1JvP005OEpo6k3suuAt5u6P7OiE0dvbyjdAmjBqkstar\nVdb9I1Z/Us2M1Z4cWW3Nv/zi5+UaEf6NgpZ/0xDiSqFvUA0+myKaci1Bg3Hu\n19nyF8he2U6FkLw5z0I9fePBDz+yTMlsTMA9sh6u4E8rtehDlY46svxH/jCm\nM43K\r\n=vC7d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBgiK2QhQK2izshBYBp0SctD2NKnxd9s6BJesMGtcxSaAiAlOAMLAgcZJEOcVtwXXEUEiar3z1GaixihE1pe0ThL2A=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2201042109.0_1641386008174_0.25261329381520103"},"_hasShrinkwrap":false},"1.2201052144.0":{"name":"@bentoproject/youtube","version":"1.2201052144.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"09cb7c2c04a007089967ccf35accd80cfaff0c83","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2201052144.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-vjLhhCIQyCeFLWDtEsNsgwmpRXK1BI72rA1bVCcWPWcXjCM3NCU/gGroTHZIjhkMhK/AbemN8qw3SbakH+M72g==","shasum":"eebc056acc2e0d26e7e2760a3f22fd9f728a8aa6","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2201052144.0.tgz","fileCount":27,"unpackedSize":2684585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1uQFCRA9TVsSAnZWagAA5Q8P+QE/JiEy9OoEdfTeZT4E\niwrdEOIfgN3frGihHkJlMdz4TpqeAz1569QZ1xejRPU6HNI3FMG6A+T2jl10\n85hngAdgI8Zthpjqo3TxttnVZFMO9TxNn8hDuViLMkgoLOkhOYrVoVk4kH9s\nrcJI7dGSmdXoHDRK6zDEp5pmOByhoIBHRvT9r6vs1U3NGuOKEc7h3DVIhlbC\nMu679s7oX4HCgB0SZ75s05AtUn/b+lh5iZ5V0bkPWn9gJFa9836ZeTFDrr3U\n3IeQirXfxuQOeRcruAi1K1e5mQ6KyNquym+tsjpsZvxS1f+bkkmKdA6S8zjW\njW7XLwX/4qoKJ27OBw2h+Nh/Tc++wjruZvumBgOfPn3mkKs5oPVAgAlgDQeR\n0xv265lw4Jkm59ECZJ49OyouHBBFtaBHNJxvroRGoBlRzyW9+hZbNSerzF5P\n5wa7Mhp3Jp6IczEsv28x3I9SuPc5tZlJvJsI19zRsuvxSsvXYc8ugFHztCLH\nOb7sjOoeH1exd27DI6NMCiBcfuROX1HRkb8g5NYlR7/Q3CmgMcuLuc63Ejd4\nNv8+ECUSqhlEVVm2sEUGVesqMiZwiMN0ESlOI17KKzzZrQZJQsYL1XVFZcHF\nYhydNAOQZRDQ8USkj3Zevkzf1LMwft2g/L5hRjmRrvf3D54a7moW2Hn752Tu\nm2AX\r\n=fchV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0y5v7BoGzp1q3HBmKtXsjcBYCvBHeH2RjhV2sxGgnQQIgf7No45lw6Pm0vji/ycM7JBjfvJ/+0n58BxLPhLvNvGg="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2201052144.0_1641473028950_0.4414313572984949"},"_hasShrinkwrap":false},"1.2201061922.0":{"name":"@bentoproject/youtube","version":"1.2201061922.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"737b882748278c09f4270720744c1618e36be6ba","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2201061922.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Ahx/eA/WRt8ETti0tzudKLJErby9GtUmnnbk0hJZnLeHqoLLHJritfCIib2TNihR290AzuARq+GUtMmfQNgNQg==","shasum":"1c7bdeb30f7531935f3d0e0684df62f74f1c6d58","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2201061922.0.tgz","fileCount":27,"unpackedSize":1253166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2DNZCRA9TVsSAnZWagAAoaoQAJ3NPrwHLUovqG8Ecoof\nfJCqnzIlzXNSYpdllVyWBcZg+P5E/o4bArla7y+crk/3u3jWVCHlKCK91opj\nlI5WWUdFrR89EK+kgtKhC8yA2H8R3rHb0eb5g24KWwpbeEc/Gyp8GfB+lG/J\nYIkweoSEkntpebZL504vEpR9ZusEZYQoLiOfMZMHajfLxWV8pKVcKb+lyLm9\np2VkfkX6tObPtlktp+X1yexN1UMT6LJNkLXdY6q/9fgKOW2sNcCZKy6HV6xD\nbUxH5yPSiYSoy3vg8iLvmFiBjJ+Wc49iOzRMzM1s7GmCiOlr+8wFYC1e/j0e\nok1KOqmUCVXj7N2W0W/aQZm58SaNbphuHfoJhHgAmHnjn4b4gGu5yNTdcHNu\n5zUWUhx86HOeU5XM8f2hxrTPzpFW7dI6KXYxlJZdkMs7y/dQ8VnpElGuzmDQ\nMaatQe6o8KTRAVx6gADQabksDPxKR1nNaObx3ulBSvEVyio+QkftiFmpowFM\nqOJxiTBjM9JD+iuLs5t0Do1P/Vz3nXYWnI9Hvw0O64fyEUtw6zgqFA37LPdR\n0ag0KbHzjecLiKXEr5jPx87Rju+4wswoegQ4o5Iq1AHfdACNpJd5mmJehVGm\nohiH4bOM6xISEcO0DyGq4HspxbNSYkMqOAK8kXoPtFfHbFqTFOCPnJ+MFSN2\nFO7M\r\n=kVrk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICX1a1HV877+M6oeCIQm5yrlfOHGL4gyQ4JIopPQcP79AiEAzOMCi24/Evr6KB6He3IXZgb39fUtSE7zQm0ItvysXxQ="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2201061922.0_1641558872900_0.716398557842769"},"_hasShrinkwrap":false},"1.2201071715.0":{"name":"@bentoproject/youtube","version":"1.2201071715.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"e40a24fdddceb1c635f67571d9cf513c7e58800e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2201071715.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-+GxQvkfl4dlPlecRomKAmxj01d5foH/ZzD4jrxfhrcAfpZF54nRGojwjXELaaG46FHb5Gg0YT4uKqbW3b7k4Yg==","shasum":"94ea3726c1707579d497891c3ec35c072292b94c","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2201071715.0.tgz","fileCount":27,"unpackedSize":1253166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2YKECRA9TVsSAnZWagAAAUYP/1YqPTn/5qmcr4t4ga1E\n0RPvWDzcuQSFO2MIduEqQeb1KdJEcoGMu/8wjf0/QnoMbKlfyTGFoZ97BcHh\njsX5BN5LzlJvC39h6EWFCx6Bd5qVyFVuAj7aC6zDDDT3K6FEXCOBdElOTsqI\n42pnY/G/iLZ1V4/1+dP26eVrb2JVso37RogXwlUpBEPFV0O9ppDk7qvMq985\nwZc0SmIhZVnrlAWJhvONPEUG4rNdRcTbYMvF5E8DcGAbxdu46BDkn1ZyV2hq\nRhsbei3r9j4LlXPyjD6bYXIkE7tK92ne6DZWRZfp0q6lq+Cdf1NmI1732NAp\nVpKPXFxuNrJH7So+SRGxhuLv3Za1v942QKVOzfn7k3eeaiNZFUn+A+kBGYm5\ng8rwJh9kcYS9coUacbKthGCTYkEmtDuqTBUdJ/CnrYCqgRF/Fk3w0Nl3MPeb\nek5q5gyT7iFQjF+PuCOH7OmShEavlo6WA4xxD2VIJ9OYae/9O4fkLXxEm/XH\nXcBdgm9jOKxoTJHpMicw5cUGuVkU1QTHvBWFL/qpqgsgETHFZzIbdMlXFteC\nUy4zjX9bw6sxliStJAiXGQDAzaYFMCP7Oj0yae/jkky9Do0NagUfnQRrrgjd\n7BfevdwzAQNczcezlgpp2Of1krAtmHiyK1/F9TeFO+crYgFPVfWCBMRE8y2n\nQrVe\r\n=jfks\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDY2y43n+8H4iZeL8nmjeu/PT48fz13T76C13rkTh7TyQIgcZ55ry0w7LEHndY5HMzbffFxYX+FzenzYJtVMKK9GtI="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2201071715.0_1641644675900_0.376432259773396"},"_hasShrinkwrap":false},"1.2201101902.0":{"name":"@bentoproject/youtube","version":"1.2201101902.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"f0b7ffe685c60b51cfbab92bada4e0c87e0377a1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2201101902.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-vBSNOFcz0yfdu9ujPlEoOpIOO/28pFMA9RPk9aVfmyhU1kqU0mKalEgw/pfsuFXbP9BrLO3erod9Sv+BT9RVeQ==","shasum":"56e4d385b11ac8b5a41cd50b08e704eeec265a28","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2201101902.0.tgz","fileCount":27,"unpackedSize":1253166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3XjOCRA9TVsSAnZWagAAniwP/iJhc8wMomMoJdt2BKlI\nopsMeZDwEFoMZqB6IdaWD1lXMwEvO5GbtqJadWXKWinVILnjr5G0eh4Tpr2H\nOG/UR9qW2JdRIyEjDT5FbDi48Pj3rX7rsxloSNjtT0WzXaBj581ML0El3ZdF\nG1qOB9fMFUJkstqKsva69iD8WvHmCwJe9dmJ7ss+EufsXOYltdwv7/VneP7a\nKwetAUWqntUTTdDlH0jpMx6n5P/jQZaZiqADneuu/z9vAWGQay8cxfAyZIl8\naeKI8/3pdPVNKcSHkTmop9CH//c6hNRhEyT80bia4QTn3XtyvRFaYhP5Ntrw\ngQDwVh7WUgRDU7wcvBBi9lEzCaH+yfSTx48Tv6JLU7CzxLJ04F5fe6sN0uxa\n4kiemnv/k7gQQ4l+2YfresLSLrD5AqDXEfWHXoETtqFO6YBto0qxiw/6CI1U\n9bdGataKJZL4v+MxlWmdt7O1RrCwCznjDhuDp9M4MTbDkHN2ACrxLME3GnOq\nWnZ1kA/Sn3NOTUt4oxF3tEPph3LQuMRYrjZLKADIFHOqwngBlt7K+0KSBSNH\njX3MNC/kw6DCgRBiY/HiaAjI7ypZypkzcbDhGhqn4SXvT2efmzVMJYZ06lvr\n20CuMEKzZNc6xu062YGhUI5OoCNkBEiXndDi70gxXffqe+Dh5YSA0v0Iofdd\nw8M3\r\n=rXeg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEUYsadq1Ugdct5xqWwaMEnT5c+Ah+dBvaV9wJxZ5XzUAiEAsZNc+uhHdIM24J1ePSbva4fBh5lddhOZY1osEw0Xbn8="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2201101902.0_1641904334591_0.7508727521604894"},"_hasShrinkwrap":false},"1.2112231523.1":{"name":"@bentoproject/youtube","version":"1.2112231523.1","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"1ba2e6854831868cfbd5aecf8a74b09bb0fbc2ce","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2112231523.1","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-fzAvFygDzh+zU33U2KSgx13afTi3VfH6Ihxt+SuFGr2OaDmr5Ze0dTi/HqB6Mql/6IjHN70ZB0oP2TdfTCNsTw==","shasum":"d321ec3ae949d43ef92f1f1618ede485dcef14d8","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112231523.1.tgz","fileCount":27,"unpackedSize":1253166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3do1CRA9TVsSAnZWagAA2dwP/1zN+PeQbrHmUh41Ip5Q\nhrT895uEE8MmrdZiAMxliHlyNelFqAjBrFJwCjp+/BTC24SHGga69AnFNV1k\n9+Nd5a2xRGmkNDmALqwiayMrNxZ2Xob7OYacsgu6xpe/ZdYVQsgadrycFP/1\nI9me8iEWyFaTtqkhmzKECLPrzG+ot4puWAlL2aXNEKcqPeMTYOQs4JMX+Vf+\ne51XklA5qdJmE5Mz6ZLHdosMAGiewVvxMABNJVQ+JtZqU73VgytBXich9R3x\nJYeEhoxACZLhNv1AZEyBWMeoYTncFbZA0/UqQBd59OMM5BgGt8aABuw/km/Q\nhUqwbThI8BvVh/oCbcWWQgmhdNZb8ss5iNDT6O7Uc7yJQJ4e9WanfdzLbjVq\nYOLHGsJGGCmUFuBBbblMOSNL4MyTcJ0JJUi/XB5tNGodaNOqkq+PXVDE1OId\nm7uEbpuk2jK5mbHziNSw6I3MscdmVDePpp/2+4jrG3rg7ihF9yrf0sh15DOn\nY4pL9HSfeVkAty76HdlKNevEIi/ufXaxRDC9wmfO31LprUxxgIUuqVYngBak\nQfRJxCxSkUl6/ueG1NQcQWDQuvPf9uPg5Yr8JTdB+mJSVt/7AU2hVzJ1O43o\ndy//yb9GFYD9IWf23v6BJh9ndY+I5N6t3kegq/Y7IKrbPFF671FjChgTIRhN\nXV8x\r\n=Akvh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEkXu/ieIiV6gj8MTNUAbmnJnWlhy60+eF+5543FM6i9AiEAiJaztuvKGi2G689pQBk94dqCFtBb57QcRQtrA3LCKZk="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112231523.1_1641929269229_0.46051929687390936"},"_hasShrinkwrap":false},"1.2201120015.0":{"name":"@bentoproject/youtube","version":"1.2201120015.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"c592aa0f3999a8b6109a8a31a07cae6a83115d8e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2201120015.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-IcxV7d6jlYnaz5AXt8DIKh3RtO2t/u3SDy6R0w1dfB3M68Lz4FcRj1VpqPlPyN0JFFmBsQuJWMEbQvLodjgRKw==","shasum":"82542e1688e25aedb60b5e30ad83b19ad19c7e5f","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2201120015.0.tgz","fileCount":27,"unpackedSize":1228027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3sqBCRA9TVsSAnZWagAAhrkP/A0t+PuGSuCKnfROqirw\n6X0nUegUdKht1BLtYJZZRSY68C1hhHekbiC3vsx1FyeojvQn6BfADweftrI7\nPbasXUbk+EbFxtk6x9qHwRogGyHioB0sjaU7V1NZnU92B+rLbOsC6FYNiZw4\nBzdBsi+Ci8lyDL0uXfsBG77Z3+IYZJBji3SASQB1SFo+5VKye5O3gBpdeLNU\n2sYW6kihRTiSZRDIVmDqrF51bx7mJQFE52vmBBB0tEGLkhBolpWE2k+JY1cp\nsmK+u9axT6s5DnHWqoas/HZQpRhduPqadCfjPok9DnAzHJKrXqtpJKPguzdD\n/Fyc8iZwPFyJlIISNIAJ1eNC8S8S5+KcXfE8Trnrg4m03znHwf2BvJ2h5LRo\nrJYJFiTJenrOOo4KAszlq4ZTD3ZbRfRkO4XHl4nmqbAndTqg/IHoZ+cxLR+D\nGNNDspM3i5GlrK09kwDtqoVnqa2Awt1JDqQQFdflmOnxkV/1GGAvMjwXtcbD\nUglyLPf4QS2pihe9iaeMFC4Es3RoXGigRLy2oSJ+2/0O9L2b5lfScgAjstVJ\nRqa89PSwlEOdrAqcQZlVCQg91n3kEjU/WqqSseHKzT+WLdb+Qod28iZ9XjU0\nD8hhFOKmyTB5S42cQTrHsAYVlKg1lrZqXW8z3KQ1n1mq87NxXvztAt0tCWTp\n00VM\r\n=21l3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0rA6W7n1/mLTPbqyYo8m5wYHIb22nU1n8OtFQAbYMmQIgGfpyE37UwPYRpMluBzdi21+weqAsKxNPbBdaqvhKaGE="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2201120015.0_1641990785290_0.05124808831869632"},"_hasShrinkwrap":false},"1.2112231523.2":{"name":"@bentoproject/youtube","version":"1.2112231523.2","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"036fd40f8ecb160f2d6c65688c6ff4765a670bf8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2112231523.2","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-zfLhunWmwu2mvV8TtKUjGasuHpLbXh1E741s9dTMxH+PP3OfLu6xgaL4we2UaWjWQXyJ40p7MMF/txghJdqVjQ==","shasum":"c0e4d978b3df793abd812077f9ff3b84c1ef8b89","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2112231523.2.tgz","fileCount":27,"unpackedSize":1224484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh31lZCRA9TVsSAnZWagAAPd8P/1c2vmbwz2be+yNsynw4\nsu4JoM4wKI/haVdnoZawjIfCqAgpZJG21Kp2AE/p/KB6ZNxIUfQWV1HaAwkv\nVnZyuZlFrldb90Ji2Lf0BnVzI4RVqW2VFuEmvgXRXHV2C7BshNfSLcjB99D3\n+RrCh+LznLCsN6d9vu7pKNl2A1jO1tfwacf5R48NWva4iDR8JnVBfYWEujiW\nPScfMFN7ohzCaN7+Yq2mvR59E9VWjQJhz/ZqoAO44Tr9yYvYbpRnIItHkXey\n2NoaxmBi4e2iS5g58m1eYvzBWahU68Qf+mYFgF0JMVeerw0hVuMb1htdih2j\nOHv0mZk3HJuqos7klVPmFj6aoig6SAnEw64wAdp3Sfo6sydM4b9dDd+h8Pnq\nldkfpk4Ya7VfioPJhCIp0FPb3QO9LldXQ3aM/wLmfzRCmjTtIa3V0K1sdI8o\nxHHiHEohvPbHQ27AuKv8bUub1fL4hDsSDiM/xvMhhILdNJzdEI7TIzp4XFG3\nna3tFP3/pgzLsqaO/Z1WONSAAQDMUr/jFlGsTJcL2Wc2KxiF6+VwHXNtEb0R\nX75amCSMPme9WYhXGZRHaJoCNkeKw2ljySczLcC/G7N5se4JvUCh77sRyNMd\nV/3DbeCmVgnZM3evlZJ8CxI9R+xBpl2stY1vJlhyTW8ND/Wevo1Kuw5+9hA5\n2k0V\r\n=6DSo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIApFN56FHmMtrayNpgEffHchclzel536EBNsJ90+qOB6AiEA/65GE99wgFyfGJT22QtJlbJGPijBaLKthHUlgss1QsU="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2112231523.2_1642027353589_0.8033171937071357"},"_hasShrinkwrap":false},"1.2201122239.0":{"name":"@bentoproject/youtube","version":"1.2201122239.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"c04895bc1c2e1d0b7b874427b9bf1cec2b4b9f72","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2201122239.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-BJnLQIsQ7AbAgibhoJBxzljPrsESLKyqjivWUPmZaasDEFXvNkazhhoa9JRAFhj715G6eYT/D9+01eSysncrRg==","shasum":"e4ebaa53dfd0170fcead9b108cf85a3031815b60","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2201122239.0.tgz","fileCount":27,"unpackedSize":1224484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4CLnCRA9TVsSAnZWagAACa4P/RqceJFRCAn0I+pqvCF2\nsUGB8ZLRdL2zfJs5twra60n8OWBDsqyyz0jstrtuA8ZUDejPgv7AFGnxM5js\n3E5VkHj6j1wGJodsB2V82d7XPMq5HvHlcSv0Jk4rBeI+zgEdXe43KMFR2ZO2\nlH3xXdR7zRpbO8W1mGvwsCLf+2iFMZthG25kdzaKOxkctCI86mFZMuZB5cKg\n+gGlb+oQ5BMcOdtvO86A2B3rILT/yQUVVP0wwAd6RpUjKOCY+W9xdisRw4ZZ\nAl4inKDIhP/nRoTX0N/mkg5/rAyUW9zw6zUUodKyV3an6MzhWdKrB22me/vW\nba7WULwliTvMV3gFn1nUHyNoB+jDlqI0IrWsrIx3LEcKF6fYLcLJgSzPXEvD\nHedyw5a0u5TiS1ZjS93t71EUFSua3zb6f39gKkSlipKEX9LyA7teUbyKiWZZ\nbuG7hUYNRu8I4GCPmXj9Yz69de7Q5KY7x92y/3qiOYrztcGeqL1sRShVqMm/\ns0g3FlWm+h4k6FednEs3sSOh79dk0lQG8t7stvmE2rSYmgQAWIRTzUfxYGI8\n+5D6CqpmqqlD7VcxeznXwjaVlGXLUDHTcxU5Xjjq1x1+TO4K5/HVGn0GyjZ0\ntxfk/J3YP1Ck/1EAa/Qyv53yFLu1jGoVkVLD/9irA1KukW/RVizg6N9zqcQR\nDTAs\r\n=yPY+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICcNATppW//nH6kGm8jtj4VJOJEpzlu59pJjh6kxQHgyAiA6+PJfUUSOyI998YHLnHqzFJKe2FBV9AbJuOs8c9QUOA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2201122239.0_1642078951053_0.8377456634676206"},"_hasShrinkwrap":false},"1.2201131702.0":{"name":"@bentoproject/youtube","version":"1.2201131702.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"e9b16ad7a5cee398ceaabf6ba7990488624e098b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2201131702.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-nSCa5v+pUtHHqI2G7FY4frHrXhOX/UqDMDX7my6jTDEGhj98nOt9webjx59SXKhtLR/XP1r6QbYc8j/542O4qg==","shasum":"cb03b8613fbcdd94933631530c1a4db96a541692","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2201131702.0.tgz","fileCount":27,"unpackedSize":1227410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4XVRCRA9TVsSAnZWagAAGXcP/j2mRTUsIT+1u65uc+5j\nOiaB3tPk+3uLsq25Rnxc7IwLxuqx1CaZJxfZxajgmVmgW3/Dhu+Z7Wxkao+N\nUu7F9Y2LpSmgjS7O75WVy+VdLSuR51xrfuuBQ5Rf2IWtol/f1mysaheYYwN3\nRpNiXFjuzZTHhYiceklQGnEIta2ajez//1ZyXUvXPZ471+MsH4fKyxu9eb6W\n30HLc36VpZbUtkgOX2m3kz6Msfg+KuyhlF8RbkJgFLu2jfudIErS9FsqXge3\ngKHBX9rj8T0asZlvwYQ5JQnX8hhX+HacrDSzPxFamSK1fK45pRwx8A3pUEYN\nJKmZ2yA7Vn/Jy472yqGvqd6/Dt94XmgXofyrUo/EfRMzqSQFSC82NQ7ZYUF7\nvu/DYwSglOHW9vel7e5iP2xX4uko0kWrV04GZIJAKr3ZRPKt2csIpp7sLykW\nl4AaQHDpX2pmkgmlIbV7VN+O6O6IAlla7wStqQ87tofForfcJGASU0DXu/WO\nuCPlmmXOXCmun6M9iIgb8gkUeWRARRoURO+U4+J4yWNrBzrkuEqau3+R3CDl\nVqnkffnfEW0RyFPtTSg1G3eTTu5YvXWJ1aicrYKRi4XXOG9wxciAK78tUQrV\nuU7GRz6kWXkSvk0VOBaMJXRKa4gwyaXEWQF3m7CkU/1UKOyfXXlaTIVsrXTI\nXlTE\r\n=4V0g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIELpQOiDuhVeQ+0eo9RTQ97BMGY5aYkN0EI4uMFSoakJAiAo6G/gu32unEGaHv3gVf4SQZIkch3t4DMtHjKbT4FJWQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2201131702.0_1642165585259_0.892523293540356"},"_hasShrinkwrap":false},"1.2201141909.0":{"name":"@bentoproject/youtube","version":"1.2201141909.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"96bebbc98d1f79b185c5ff6c58442ddc2092547d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2201141909.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Bbm50pHSHeL9bxGpBZioeLKUB58OXQYntqeeNGAuQ1ZnWsSjSmbLphQtikpcB9WfgbEzHF2omlhHx4JHRw6Ezw==","shasum":"f81deb54bc8c389bf84ec688be8444d00288795f","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2201141909.0.tgz","fileCount":27,"unpackedSize":1224848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4rzlCRA9TVsSAnZWagAAyQAP/Re2gEHjx9MBByNeku0I\nCPy3aH9P8Ph7QJJXKiqd+cJ7iBsms5oXy0bR9UyInhOwVKHd33nET8GgvSY2\nESefGBIlmxcDKZG+rub30czkJnqbzyBPaGiodjmMvEehbKqnl4SPNcEleRDg\n8rA9mVJAM6DSKbLsnyQxxrPbglYFHMraVKtIej33tVvSIahtGx4hxjGWZKsC\nQ4D4I52sixZQjTi9PE/JNeYAqsRgP/ezZPFKK6iEoo/SL+TfeuzRV2F4lDzk\nGruLOOFd25O7hriNWQkxC5xYCDpdHcKq0TpkROOmMu/PlvxGA0fkbPY33m0T\nRNlu6X4cA0dLzoNzbe7X9sxy+VsXRoWX4qporUsbmVt2TgfUmevj4LrtiAX3\nrwLwk/pESZOwAzI9gdRYODkHXqWSYHYPWeb+RGlKuAwNqbSOryd2JGXeHfEP\nscu2n83UUuqWQh5aR3MZ266zmDahcFC/8UtGdQCFjBVaOIQzgW+qYlDZJGLi\nRjl7VNIerZOb1rjbBqrDUajSQ/TG5NC53TbmCeIlddNOwsykbpA6dwqsN5Ko\ndCx2SdB/szZLz5RB9PvPrW7IQv9z9pdb+T3CDyzePadm4iCWwb95o/QFSN6E\nEq6THLw73G1umE704TUGHY0U8pc0DftcLdy8KSUF8vUMdSwY/tFMnkQ/jaHV\ndr5K\r\n=dyZH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZL/XTYOVkYORXt9YjCnyl8AsyFfIeO4BKiLNGL6FbFAiBLqPzn0vHxLqhaHyE3jQKSbPlsb6qYd+0cXAUijD8wdg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2201141909.0_1642249445602_0.6365463612232649"},"_hasShrinkwrap":false},"1.2201141909.1":{"name":"@bentoproject/youtube","version":"1.2201141909.1","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6474ad58b0a7e1997cf1472b09ba21af402b09fd","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2201141909.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-tgs2cO2ReKpMobXMrAOtMGGgR7xzEpYYDqPlD4txajcMmisleyCiM9J4iOAb0qvPc7pyBz9zEcIVbSauA79rcw==","shasum":"86744017f28a8dd9f2f7db53e2345f6aaeb48435","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2201141909.1.tgz","fileCount":27,"unpackedSize":1208195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8FUCCRA9TVsSAnZWagAAvWYP/jAdN00YbnFAHRO7dioh\npE5JeZ5f+HGFfkS/ZYGx0p0hjyU2Xjcno057VFUd0eluCQOEcqGNgOp7UYEi\n0/8OIxJmlEAZGmCYD723lW+FiRZglRje9KjUh11zuVKcMnRXMakK/BrvV3ZO\nBcB/0Lhq3AlU0R23uFCfMa+qtiVuABbvxJrjT75oSSc3gPi4qHfzANv8A074\nqyehEUnyre9MJAsDMAn9P6JWUXsuAKHxA5OGImlGwQVp0iGVoPJ1+45THgGS\n549MTsbS0xX2WMC0rFC/oVfx11/6l3p+5NK5ZK+s4YBhAjJgh92rT6xI+pQ6\nWJdwJIp+p4HrU8NrDfY0rNw1jSk6cV1OKDSvnB4qrx+gRqQkZtgokh8HR9jk\nEu0EfPZnYIvlXX047tKG5n3ytZxhZ7fVbB41MR9xASHFrsnGkKPnkTsT6cKP\nbYcb+7K+C3Nib/Cp7ltkNS5K0ZKpp2kR6Jfgr2FX6P75iTb/8gD5di3lYzh+\nK40BMRWB9iZFlWfPzSzHiT/pfNKn5+eX86+rOdXWrMRO8ZI2ZkVTWZnF/1Dm\nO2psYioeEGN4wD/iMDk7y/BXzkxt9goqy2fMFLwX6jO7Q7yR0a8GBb6SK53e\ncPdrRQvdCtM79FO9S6JheDnMYkCSxpxM0BTFQIvLr/aOzK6511TAgFaAZuzD\nu4/T\r\n=4d+I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEchJhRBnr4UqLtZ2hxd99z17ZL3B17Hl/2Y4/WSe3wAIgICYAOAXFccD2lpGM7pusvJXg2SZ8TFSSGylea33WFSA="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2201141909.1_1643140354240_0.7950218801812656"},"_hasShrinkwrap":false},"1.2201141909.3":{"name":"@bentoproject/youtube","version":"1.2201141909.3","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"1edf4ae1e7a533868a19fad5b3b4da9917432bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2201141909.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-VVBHQWrK6NbthoImUuaWe5MsZc9wIcW1N10T1mH77EnG0tjIf4wiFyJugnMf3WAz6Rau5GqEAwYBVCHvnLRkEw==","shasum":"7d7ee9255758ec5b22d22ae5b980462578f1cb5a","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2201141909.3.tgz","fileCount":27,"unpackedSize":1210546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8baaCRA9TVsSAnZWagAAM8gP/jFWUh/6UdlXpsE2VqQT\n1+xCnpQB84zHWVjPEF6iZcdT66NMxR4/hyhOrsYCfrUlU0Hg0+uM3gBsiJKr\nJE2b8ul454h1Z7klCvgQOBXsQRhQREMrlZrxV3BekabKylAGnV5PgSTsHPkD\ndzySbjCxef4Ihj0gRHsjcUMtqutjOBH4zWlu+WOysu2rKXzxJpGVZ5vAlq+d\ndXtw5e/4SzwaJFDdkKKCeDEfc5Ekvo2IaU1+2uDrtZSPIrLt/3IRQe+MlK6p\ntbDcT2jOVytEYnMZmDsL0t+OMMWkk2a1yeVNKrgONr3vwtqHg78hjjmPhQCK\naEes3aJCKMROS3cvqZJq1o2FYpy+BoTpThVvSGWuTSMZdClXt+QuHj5EgIPF\nEdgiCyHg6xi2bPmTofqaRu7uu46C4MwfXM6waow33wYiC18SCigMpjCPyxYr\nHey/zrUKjNprXw2dzS+miEGat/spT2F8d4PKwNKlPltAwZHQqhIikbgl50CY\nmkKn8Of1j5hapyWvU0wkRBK/DDV3BU45e5aQVV1PQhvSZF8Qxzr2OhRbWsuP\nyJ2jDytL1q2xYjWZEnkbgIC9zvOxbi+nxI2GMVj9A4G5Qav84+gm5xfOMCRD\n25GTf21MEDF+IVUXFZGz5aXmiGrHxRuF3gvsEHJd4/3Z0+giZ119AMsIvdJv\n9MHe\r\n=wJQG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYj1/5xkEx59N3b37hWadCWaTqfX2jMKL8BSbAruzSZwIhAJh4re0sgey3fXWbi1AD6VbflSrDWT2x3CLlHP1tnycj"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2201141909.3_1643230873543_0.6680732907072249"},"_hasShrinkwrap":false},"1.2201141909.4":{"name":"@bentoproject/youtube","version":"1.2201141909.4","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6e60d79b180fd0983c9644d325b45bd569c6da2d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2201141909.4","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-ztlU5gKY1PKBcAQSr22tKsUJHrgNbNaj47BU1voHDf/exz2Ik1Cgv6T/gyiVWo2PfeLeKAZFL8BedynS3MFP0A==","shasum":"0a12aac41d961f5b5d51f2205bfbc06b85132696","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2201141909.4.tgz","fileCount":27,"unpackedSize":1211248,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+ajRCRA9TVsSAnZWagAAXeEP/08E7oGTLXv49rmCokZa\nyTyXbgq1fgH5rjDYKYSMFPfXIuBCbyn4Qavk+F620vI3LIlZ1xAQOX74t6uP\nIrivt3k77HseFWoSvmWsYStg8EiNFYB9vcgEhmu+hC27uUlK/j10uz3qk7SW\nK4f9Hb4dN7aKMyX1GxFSlKqaE8OS0q1bVzflvudKMSksczZYTrDuJr5MW2r1\n6AVFmV3HSG/yhqWyuym1m0/w/LRPO/d8bW7oQmvpx8a7a8kZabow5qpvVCsW\nKNSAf/8YkCEenR7/Tz/+gr8rPK1AJdNKBOuCowYUe4hzUSi3qShzTjLJ2ASP\neh8dZgkuTXwerwvuVZbp6vpKb1fyStBmOSCFIsezcUcBWFxBtrT8wCmRRg0a\nwLdW7P723EGe3RoJHw+MdIvnAT2wBBQkTQNKq7xaWB8ILPsU/CuXEWF/18EO\noM8JfkD1hDF/uvKdzhxOLTabXueUNDeiNTPutZrHlDNv0yX+LeNaYJpj4NAb\nCVhfDp/YbCQ4AwTNoOapFm14mMo+ADhaEOGrhDwJK3RvVzSIL6WVOMfwZb+N\nILrqTZxbLUK4USS4IkXCfOHN/WtEH2oqF94zKXjQisU0nnx2K7glxBLlqLu6\nNxi7MM1LFHnqdo8TaohZ5wNO5lVIOLOcddqubyGgqqAbh1MYuqnCoxUxxxK7\n9U8W\r\n=6uE9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHj1NgDkVotHVOLYj+dUy5v/8iSnKTY4FhJERt9ZLUtsAiAo90BRAWAoarAZe7OQNe9V/7L8BaIlZuPmooa9kLkmnQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2201141909.4_1643751632912_0.27812871750346413"},"_hasShrinkwrap":false},"1.2201212122.3":{"name":"@bentoproject/youtube","version":"1.2201212122.3","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"ca1c7d4b4b4a72f4913d7c304b5368187458574a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2201212122.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-mmKyxQMsgfALJ0JP6Z46i9NP4oQZ4nAZlk1XKz6AWA6TTWTI2aDjC3vegPRySrjBNQWLjCmylida0f1MpV8p8w==","shasum":"c6a704ad9a1e0757bd1364e4047097da632ff3ac","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2201212122.3.tgz","fileCount":27,"unpackedSize":1211248,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+sbVCRA9TVsSAnZWagAA4NQP/36cPfgxTYSFxEEW1gct\nTaxEEhiNiVQ0ekmPapOyrlsRyE9z0gUE4qekA1FZmBf8bKr7I1sh9rWzpvfq\nVLvDTBSd/wfQUJSSplkCXtbIAcOTZy3Wddq14BdRd1rmkNQwHkyNcKYilv2x\nZML/P17wJ+0xSaJbhpW2ZskhMZP9Kg8fN0TLcYOGcKoBdUBMuznOWV+FRKkp\nWREZDI420p3XLJzFDuiwI9xzCYQTddbol1cW6zw43RbrXbTQdjmfrmI7RbSp\nDxa+YaEId7hDUwVkZKRDPSkUzPPWgfVoXioc9dwkaQeRTCWEvFD8DfBGcELt\nhZADnr01NZZV/l9wiWX1DcE4r0aViu9LN3snzkrvZUGjIJc/pGje5FJ+1JPY\ncQkFXopxA17di+cQ6Lx51nFWZlnUBltglpCgJejiBdxwGVNl00UDHAy0UFdY\nllVSQoyma5AEexz/3athVVYVqpvDil78TpHzo2Ptjcmf6034BnPm5npYTox8\nokFSpgvKZXFnrvX3WyoO/8JFRFpMnwhPUT5cMj2NzDvxhUeFo8Uuw0Ss0JjH\nsvyLvbZnMBYIjc8cxxma3JHhur5aiEarh0zn3Kei+tiDXZUg+c43eajpfewk\nn4S0JRhfS6mYgxl22A8m8ZzNZlEUkeqt+SR1OoPSwVSSfS8JEAIRwugHpObJ\n5h1f\r\n=vMG5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWoWfxAMc45GSjVWAq84v4GNb1QyDZxA9Qw4dnroiIIgIgaCqyrkEggeoeiJeGzyAjD5ihRpEcMzJjDWxFbGcvHtI="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2201212122.3_1643824852971_0.4492585489124825"},"_hasShrinkwrap":false},"1.2202012258.0":{"name":"@bentoproject/youtube","version":"1.2202012258.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"fb0c4a54446b5abfcc53d1d446f24370c05507c2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2202012258.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-anMLZljdR3BQUHp9BfNje3WI9awp7eDdSjeN3tSOPm/Wq8FCgMaUIcGyPP5b0WJrat8mdUS18kKc2nJRMrOqNg==","shasum":"e434cc6f716db3448fe3755733a504a92ef3bf42","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2202012258.0.tgz","fileCount":27,"unpackedSize":1211248,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+theCRA9TVsSAnZWagAARBEQAJUS+dmwg9sc739Vv4ET\nysY7BuVkeytMqGSHe0sSvisd1UlI1is6a6p3jOY2HzMb0oh2tc5jidRLZ4PF\ntYJuzwjD/j3dO00cq9oU9njRLaVUymQkawZJ4SbydeMJyVlEPTQixCkNTui1\nI1U6JTvzLp7uqvqoT1G/OPVoPZv4UxEMVNx0sQXsMDcR32C5kieUixVcOWuS\ndhw3VaimqH7e2ZyYsPSOm4rGcjJfW7GpfFb8Pi1vMOYtd24FRn+0o2BpTYbq\nSEhyMi2PiQKxb6N/sQvtPFer2zrn/LEwHeeyr8qwVMLxAo3wa6ch2Xhry9Hk\n0LsYyJ1oD/foaJ2ZOd2xwlFWN/YUWiNjMQaklgxw6x/mlSS4YCFoESka/aS9\n3UqlWXCJ5le6dX9ijc6JpSgvofmtpgzwWPnjjxdcbkLYcilR58n73tNNDXUZ\nXieHkglCtHgSG4nt/FN+3PSIHViPsjKS6YVpmWNZEkVYkiSouo/HyKcikiPZ\npzETjWYknh5rp+pod5M5N782tv4a7pI6LSnLvZdat5j7ATIunywcu+OBgKRi\nMOTEX/6rhn31Y5g7agLxR5VZUaDM79XoCU7PUOXoh453Px1Is7547RyyCRs0\nTI3V8+DdLnLB2WjXPtjxqzNColL6MwBaQggwIdJDw/30g5Tar18xrl8tZ4BU\ny7QU\r\n=2fEz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGEPjs0vse5xWRzkOO+zzIebY6uAUJyU6cGGNS/DQ6XRAiEAvEaZKhYsPtUQXoKZDGf0Qo0d7LiIkrb2jvhZIk/l5ag="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2202012258.0_1643829342255_0.14629446734670104"},"_hasShrinkwrap":false},"1.2202022130.0":{"name":"@bentoproject/youtube","version":"1.2202022130.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"76b8fbdfc923fb90c4ecf4dededfbae0a5978ff5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2202022130.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-9M5n+DL+ch0rCFGJUchpl8zNiwZv1styMoR/Q7p5V+wp+DI8Knb/MO4q+H1ZjMGVYob4ESAS7VrUXosPcht45g==","shasum":"f2323c69e4ec306e1828b9dd5a97d47b2bc15f5f","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2202022130.0.tgz","fileCount":27,"unpackedSize":1211248,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/AnqCRA9TVsSAnZWagAAWK0P/0tVY81NhiCml0vrfHHM\nMv7ZbQx2wom+bOTZpP0QuCguuT+iL4jAMya3J+QbXaPFHB1Nl6oNOJ/MtXbA\nVWv9ee2QeTNUcfge/8qtplA56nYdTRdDhfVdjZs5iNplWMxdLmpndWwPm1XM\nsN5hDFHGkBmLM8qi9sSTDjUYmCySByfQ+BqVxU/f88+WOP1T21xoTHcFyE9o\nl3uKCjozYcVp78fSbQn70HVzVN6fsMYhPGSHz/fbVCITDXroXMQBUU98k1ZG\nWjB5Le+26SZetY7dB/ZR8ifmgy9pRdR7AMF9svuG2w5yx6v5PubrdmNy4zbv\neLHnkWNBNbA62UNgvio9vWbre7n3f1XtCNLk5aGnR3aEqCRfUC+SbSdnHyyv\nE/w8+xLSS7sSzRO1fC3NZ8zBPOnJR/Rfr2dTci2OB1MIKvQnRBtp2ELH1m5l\nUJB9odWVzBfzman8h5CVZTS/TeXEVa8Ry3Agh9sWG6CkyZutZxCm6zQveMxB\nWoMsyKpsIYLguZJ6wjK5gyBG/msfVGG0AqXkA/VVdSKjfN5W8zcpWqFWtyUG\nFo5Anml3lsvv//KdX+pRvj0jsGtqBE5Bmly2nE3hZkHOrZHOvYp8pUwMNqRS\nFj6KVXLn++Hp4nLaSKpmxI+4jzi0mOXSCEUn7+zhXxEX9LEFXvzhAPBpO8B+\n11bS\r\n=0K1a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQO9kFZ+Y90qCRqnL/ccaTS8XTGkTnJEwGwtasurU3kAIhALBXkp8KKRIOqe8FFddlesDQ9C4MDwzEBW9vCS7drwzp"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2202022130.0_1643907562344_0.3919874342103531"},"_hasShrinkwrap":false},"1.2202031816.0":{"name":"@bentoproject/youtube","version":"1.2202031816.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"b29dbd478c93a5298a18f8df14e6c1f5184879e3","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2202031816.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-91aNmjdkFE29wjll8guTGf2bchwogh8fo/BQcSbmR4rFg2YVRoDHZTpzIEeQi6J8WKagZz1KomkAreRx9rBAvg==","shasum":"da21e15b9be2974fa54b6ddf4e3436677498fa87","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2202031816.0.tgz","fileCount":27,"unpackedSize":1211248,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/Ur/CRA9TVsSAnZWagAAHfQP/2brmLRJASrJ67qDNyKG\nPzp9JZxAzDnvYBfZFS5r9Fkhf5tQDGjVrE2FFySOF+GYFWnRr1lWPR9pI70t\nZRJGIoCbymfSEjFzth9q502H7RhpYga6yGlpatN8j9roUM7UEzPxL1xME3tX\nexmDiPYLlmNNlYlzwYPKcGTxetx5yiDbrkV0KK7xrM0SDdd8JZOCxb5dWUib\njtyqNyZvpWiSwj3wH5LjHI47eybRnO5MTJbSxmtxjQa23knHGbKCUZe3UPZb\nvGBoK3QgbAgpdRlwMOEU4tJHbeDoQde8Puy+ZycMQdEUBpNlQkdRdS6BL6FQ\n1tWvNTF5ZB3iEsOJEcbQIkVxSu6WkkxrFaaAtmkasE3dKBUSQk433FQ33+xh\nlMgUumAwaG7R8nbEE7cV6LKSulrYp5JYF2Piyu2R3Wak7V27wgA/MVbia1rZ\nk9HtATmkLoeWK9Bli74RIcae5fPFYQkUCTqOyKqRdjB+a5A68kHumKEwfk6A\nMS1mLK3bAjiySeKVHOgXE5m6ztdzIkeLVNznuNrTxYutsMKymEmEkU+n6qNA\nWu/MCpe58kkGOKwy1m4oZcymAvEUql3RSEYtJezgydbNdlNIVE7xyU2vMVqw\nvX9GmTmj9162DZ4tgsoFV9uu+hCyAub5ol1QVDscNAb1QaNiJnLQ3GUvAOWD\n/UYQ\r\n=EcbG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFW723IOz80k8rLHHySakd6YpwJ+fZajCw74q2RJTO29AiBYqmdgKGB6F3kYU0btElarYnJNbu2NqL7tnspJoEtPMQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2202031816.0_1643989758828_0.43120901775074816"},"_hasShrinkwrap":false},"1.2202042210.0":{"name":"@bentoproject/youtube","version":"1.2202042210.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"04d031e10759f2ab3f4a10cacd2b776e3de93812","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2202042210.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-A0Pf6j2Z0Wh82YLymYdQkHCZyH/IEgC7WDqctOkAHTfnn0o5Hl11EWypsl3qiyq3N+OJTEueB3rZ1KnAPg2KMQ==","shasum":"f181e8908b30f2d94af755b20814228d447f2fd5","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2202042210.0.tgz","fileCount":27,"unpackedSize":1212627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/kFkCRA9TVsSAnZWagAA+GwP/0VBU7FP+iapjW3h8SUa\nPofTI0xjOUU2L+W8Xul1JDcWCTXw6Lqy48B9rdlpC0gu658Y4Thp/EpbvLpD\n0rlWDnrZlQ5HdGHdEhzUMa68BxsvRO9YCUz+pckXRvA54MvNGYhj6PP+E5O6\nPIDbYsAQ4hajYnEwwaoEWNvHrhUPFEwIB3Em8Js5rid2CBjaf25gQ8FFlVFR\nmiCG3+GlxCVUwD9SIA1g1H9xXYAz95aW06elXFDK2K/dlMusPiLjlP5thZPg\nmTGGTREeM6+WinrfZZNsyARSARDVy+nL8CstM8FSHYkz1XmbyS9LkykFyP+L\nGuSMcEY4gtyGUBQtbHbZpU9jGpS+PXgrG7aSCTJd7XYNHhMVXWykHhmjxsqq\nklGVoiLmgFKjtF9elM7nBf05/3UTDkT9mS+9BGUGNVypLd/mSKhfbda5o03I\nhPkaLQlOJ8ZLJYP+R0RIPqUlx8eYARunrVxqTUM01n6YVb5xa8ea4DDOH9lk\nkkmVKcbZvZBLH8yAgaPkUZNsMv1CsJ85+TdmucTRxsxoaGLxhLvh9ihho63j\nTPKFvlSl6FMVdDqN/dP/ohlMjELeR8cOLUVYNQfGIQ8+jgd2X1N4lNjQNn8j\nVH7QjfboGczoJWlxqrsS82B5yruFuwzqJ27Zemf9l1ZBRPYAKagI4NW1L3Sn\nGlJA\r\n=Xto0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBwuBAWKInjoUMbc4ww43ZGLSJYox+6maPou07s7Qm9sAiEA2RbAYg9aHnikItFurywKqXRnpW6aP4Oe7LS1nunmQb4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2202042210.0_1644052836551_0.7241633221234305"},"_hasShrinkwrap":false},"1.2202072236.0":{"name":"@bentoproject/youtube","version":"1.2202072236.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"1d8443e81e44defe1ab915032668da75884187d8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2202072236.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-egsgOe29K6AG1HJ5/NrcYY3JPx/LEYvnzG3cjY41uX+oRtz71KmF0Q/B47RXKzllw6TdL6KsiUupr+7+DihuKA==","shasum":"56cd3366b161b0ab20c51b17f7286a6df7f141e7","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2202072236.0.tgz","fileCount":27,"unpackedSize":1212627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAjZgCRA9TVsSAnZWagAApqIP+gKBQu7xqWBKKeTTTBDy\ngZfY7d6bR1MbdGHMZNDBjWvRCkSq/qh/x4R0wqjTFQc5cVqvzsNJGN17Bs/E\ngEn5ya6a0KEJd5NrhmDGZmeO+S7tdkzzlXdyAyLT6oaCXUQW2KGEJbV5QU9r\n3BQBl+dbr8iKI21x34n1nuKmNrrQsvaJNHEgbN5eAUfO7CyrvN4bC/66bl03\nQQDFW7GG33a+JULyCS4QhPZLIl7C6jzDoTrkomIO0S8e2AxTttwxXX7XNa/V\naeVR+ESGqpFBaLpBJCkEp9/NPZ9Xd9iCHpzFDrC8K3ikmaC51AArRj3YQIty\n/wAnwzxjgtcH7RnezJsqIegW4ZkDh6ZcomsM3nhf1Ilgj0MEEINjI9o4oYL5\nowdynVWX8BuKwJAIzDXCfrdAAtRVJHzmT7ihN65n1mM74/GTpx+j3ruz9T1j\nIUg//p+pmcNT5tG0JfY7nS54Z4zkGAgrFqzHmVQy/CNdfbTplezHcbdOzEdl\nm6FxfrpewQy3wfOR9/Sd3flOlNqJ2+ZdrTWE/J02kJNpXasJIBoyhDO9T1H6\n9TSRM3INMeWezdFNXqsWb4+hE/FFRBtouNiblCR5O/0e7Axy0l3n7+wA6Pu2\nVxAmwkrm7hSzDoEWJUiRjNRrSOiEJOS91DHQF/MKeXBDVNeMeEIAG/PE2V/G\nREeg\r\n=fQFW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHgpv++zNzasuQuG9BgbR7baZModLIfQnqg8/0mVZAbpAiBh2wRv5aTm5BBg/gXiHidi1THKfhMh2yDgDbkH3RZpoA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2202072236.0_1644312160483_0.6491381815392208"},"_hasShrinkwrap":false},"1.2201262038.1":{"name":"@bentoproject/youtube","version":"1.2201262038.1","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"cb2af7d382510037805d85242e3f21a88654a20b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2201262038.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-swtnZrPDt+Hi81IY68ha4RnbQ3+vPIXISouLkqGH/MoDUnC0+us0inJoO8bgwwNDCX3Ye2c+Ta7lGPn3gi6Fbg==","shasum":"6ae423e11961c5a9058ab2fe1f3112037028786d","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2201262038.1.tgz","fileCount":28,"unpackedSize":1218172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAt2KCRA9TVsSAnZWagAAJmsP+QFu3wvOvfHnpIwhuDv6\nirL5KBlfXODYvYphAXYpROe5w6mfTAsdce9lCJk422Mz0FI5h9A+I1b1xEDS\nqFGCf+feGxrRfGvjegE7s6pM5sSi2wfBn66uzrNW+F5kD+c3S3tFrIaBeFm1\nI3ww8jI5SmsIkcYermH5iLrv8GCLsHNgynEz4PkKkfa1SRdyT4abmwTiQNna\ngilr8cIgWWQBrEgAwq3GqTEPuD6lxBBSlajmmNvZJCenH/2u6yEF7hEpg48b\nuNBtY6bSo2FY3+2EmcvM+pJmTk5c09pw/hhXY1oPsAD23563V15W4rb3biWS\nOW4IyRIIOS7TxX63AmtLpTh/29RtbKl69L3ggzerGD5/pk3P6dy4iWNkN1jf\nvhlXc2q/HqdOradhWO8P7du3d4ZW7AFr/JNbCm12G73+u9AyrLJvHcqLr2+5\n5fcio5TAEXXCyqJql6VxzeTd2lxm2Snh4wFaV6OkulJPVmUfpRJKjjksSero\nNbRGrb53r0f5uAbaEoC+seWcRDa+zQoNiuO7qsGPHiSnaEKi7V6yIOvGk8km\nt4mHZHGjU2uLm6UphLsDz7oj/R4btSxr3AEKsWOFvyY+0CKyaAizT2wKg8/s\nKEvv83gdbFNvkX6QTJ/T5mEwzW1ePNhMbZLaq8wB5tHIqmpfBJKYAbnDM9d4\nEypw\r\n=EnTB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAL5Ol/nhH0JtDCj4sim+KXn5qqvEVlYYT0IMSTd5QYjAiBvezCp2t1CULY+8sks7g0aXWET8qUdU2noy6wuLb9sZQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2201262038.1_1644354954325_0.25136574693566316"},"_hasShrinkwrap":false},"1.2202082004.0":{"name":"@bentoproject/youtube","version":"1.2202082004.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"572ca92abd38a7a42e381c556e12e2d929f26802","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2202082004.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-j1XXTOzFLZUDPNrxILLptdFaNao1PEQANeMIY9+jS4JD9cUwEz0zF8Fk6useR+ti5VoH4oUyKdW3GSM8SdZoOw==","shasum":"3cd238638ddc0d9ead3b67b738e20814d788f26c","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2202082004.0.tgz","fileCount":28,"unpackedSize":1218172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBD4CCRA9TVsSAnZWagAAaHIQAKFbyfWK/l1PtXAY+XK8\nBRactir8Uox/7C0SpUvKyG7kNM3n9lv/NHQ6pqQPJhvnxbSSMxANfpdDoQnD\nJ5QaqjBLiSluqohe/w4fGUp+U7yzrGLjUUjw23KXPrbnN36j3jjzMjikz6Io\nAZtyBFIWd0ofY6Uvnb44r3Bigdc8gRuuo0veXc60K8Bdsut2FOMWjka2l5Yp\nZOOw4rGlxBbGakk9uMq7B5ngGzzzGGiqyltYqAuJJuegx4Zbzmh7vZevSEc6\nduo8Ry7yrBY3Ke5Cgluh5J/PBAY/Iv3WQO9WI/aO8hk1PgruGGs/ybF5aTtX\nEGFUqvnkaZsolFP/LcxnGx6x1kcQKvDSwETn6alEqKoXXWYTQ+qwi4ly6WX3\nEeQ/Gct2/OKSlKiP+PwX1tlkGqfXYILD5Lw2UTsMEj0awpQr3KD3vVqyMEOZ\nDrwGhguzpjcjbDEyyz5OGpS30diQpu/8fJGk8CfoQiBZO2cnzHkAXIhIZpdM\nvbwZZIMdwOPhsTvA/bGSGANA99e8L99nZkShvf3gxPK3sXSmJK6UzqAmMDud\n0EWl953UCUQL3cSloG/wQ577q/xEuRQPZlCHdURED2RTt//q6pN5TXm7GqWc\nBQLO+y5ksIU+Z2vQlOSlh0Cd61HUsQGRLJhWwssWu5iRM21RLyHZBKgjaGS1\nfcC2\r\n=gVtl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCq5evgFN9JNkzI01v+B0Hfj8G6yYU2HEfwgw9XTE0b5AIhANzjwcggV/6SaO8FkmJ7/8bQvJoNKJSjSEqHbXt7/zVh"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2202082004.0_1644445185888_0.16767575536284496"},"_hasShrinkwrap":false},"1.2202092050.0":{"name":"@bentoproject/youtube","version":"1.2202092050.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"37b830a030b935fcd922e108d5afe28be61d68c7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2202092050.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-5Eua93wJ3FtewILsglBN+sL2lGkuyuCgNbDKSEiJoqNOglPSTRfUtuIXHjT5PrpRB34XOXNwkXA26ijjNM1VRw==","shasum":"ca6045538c8e30288e8ca8ce1e9d29b44a506505","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2202092050.0.tgz","fileCount":28,"unpackedSize":1218172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBVKfCRA9TVsSAnZWagAAr0wP/2/P/QlQe3aUs3oA9FwS\n8u42ToEEjpnnNtfXaMlkr08sPzi/zHDiKUxqApDKtQ+KBXFzuvAbb2RAHyle\nKcTKRrxLKfS+2mLp2yYKlttb3MXen41tbO+2hopo3+pe/ihKb3bV5SgKion8\neax9WW8Dv1m2KUgCAqOTmxb4LEn8bcmu8kDfn6r/TbuowxgZlCfr2X77yHrs\nmdnYph/QxwfOIZrnWR9ifPX2MrnQ+AIuegF9+7lT9a7BusWkrBWvT4H4SUOV\nTHboV2ezo6jTv+DT1sq1OLl96qz51lmsxRznYThErPZxFBBhU3Ak+6fnOPpx\nicmp1tNqVZLFRtRYM9H8DQkceDlYMhbf39SIiaSFG6Ro7IPsco+NTyeAjVkv\nfYXBmmPoHwgeUVz7qAnfCkOnvv+/mw0ZT5R9CaNDmuG/eR9N/Wq8+z9bFtB+\nCCvAQyxtrswMAh+JQnv1qEoOTVsH1G5/6q4m+MobZEIwJE40q0WKVbMXHabO\nNZ9abnet55Y1KlCy5yuJ6l9qovNutONO06n36G4Mxow8ChvQpA/EqmfxNWBj\nlzDAFz12xBosdeNO3pJKUcI/RgayYwZP38iYw3tNZVCHDa5Gq9qvHRmn/JmC\nXRfyTZUatyWIS5OWrRDXTCfKL27WnN3BFdSyYlm050G7V3wL+Y1ivLOs8R8x\nSLtF\r\n=i2h8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHS8Ikpf5X+cQ4tQwZbfBTU5aL37YIMMvHf7Gy2TcAHAAiEAz5CfBm6jBV9yVRDxewiYF0oGoCaQ5jLEPc4+W8NvvS0="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2202092050.0_1644515999485_0.3324160033796293"},"_hasShrinkwrap":false},"1.2202112230.0":{"name":"@bentoproject/youtube","version":"1.2202112230.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"42cc51fbf53c86e33b0a12004dfe9c35b8f5d0fa","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2202112230.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-MCPLpj8YzL4WVaEOe2YC70pd1GJIXeUEJC6twA0lbjZ7bOKIO0mWLHK3s0FQ5U3J29E8ZE53PcRFwQT8/8sMmw==","shasum":"191f35c81b6a0b608bf102344edccdb50ab92581","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2202112230.0.tgz","fileCount":28,"unpackedSize":1217484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCsTpCRA9TVsSAnZWagAAOlIP/A6U9fjonlkaZyujtsNw\nE+Uc5cdAiojaFNFBvuS1p4yeaOG4xM5IG/tJXz/dUk7ktKm3Ex1toGrF1npt\noFwydcZXu748OFbPmORsb6CaHI/iHaJOPfwfCZoHXp1vNwzs/Q0jYWsNDDqP\nrkHtLfae64Qoah8GBViqSCK7XWG0je3LYpvey6kb2TeAkUS43hXe1EAnuf88\nX2KxRtK9ppqQKUE3oLy1+5LqIzNsKvxSG6gxbjAl/ahhmhA03UDND4FJP6M4\n3ZWSi60q4ePSE8G+3hp2SWb0tc/YKtyESxqJYZbd5SZ7Paq1LqzS88OIWERo\nP3VBa6y9+A3T/4XRI4ZkQHB+0K2+8WdbcEMTvhMRz2ANujdB7iTcXFdkPJ3t\nMEaswZVgRgB1E19Set30wlFl+km2UcU7UDERHGefo6841DTedg0zXZ9fBIsp\nt2qBNtzsGqb5p5u6jDuKwqRUjL1y1RcWYi3BkVfcE0FN2moaDX1JBsVzWXim\nn69vL3+uNf4GBDbxm/HRSpmK9aAYNB049rKfzYcVOLDOjmwEVBkqMwBzIoCk\nwnHYS55+o1w1he2WMRuYGCWker/wdvuY5fTAZ1c9Fr2r2lFyP48kon/9zr7f\nJahUtMQfe/dDSk6DzxNv5UhD8mh+/ki8LtosVWWPtWY0dInEc3sDFNp886QQ\nWuBr\r\n=0Lx9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+ba4nTbmJNVAb56DQzQF4Bxt3ZGFC0TR6SmAciwO96AiEApwmSzZ23atCRLoHxnBGg5R/Y9kexB4xhZyL08ljJnGA="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2202112230.0_1644872936878_0.8308657925420666"},"_hasShrinkwrap":false},"1.2202142035.0":{"name":"@bentoproject/youtube","version":"1.2202142035.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"4bb5570c3d04ec8e2a88418e8ed8b420e5b31ce2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2202142035.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-karTPVhdPb/XZ4XRSajv62RaGRPXK8G275aBudesz6lKT0tJzbqnqfNgK+Lpnx3M33/MhnDyN4rXIas7Ua/JfA==","shasum":"150678cf51a8af9a7103f59d2198863fe3e60d6a","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2202142035.0.tgz","fileCount":28,"unpackedSize":1217484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC3IgCRA9TVsSAnZWagAA9S8P/15vJJrSDnWckDFV++IF\nXHQAQi0C4b2Sd1pxqAIZGZuNIL+1HKtX6SVOm+AauooPRh/K/C91fv7MdySi\nDajB5ikBprWc2MUQr/OEx+Db0G1y8FkfvxtCjPyzhTyuZ/5qwDuqJa/ny0Qv\nJ5vzRjSz2o0F/jVgHl9hlM/DiRZohvlKMXURD3925ex1vV/8RRONrrJ+k7Nx\ndZWtEfNSUT4u6RqylyLT45XpqB9E9LSTHenVXcECPcCIA20pi2HIPyJ+L+Fw\nm0mReLbEv5aygE92JHNE3gcWhThDXpdSvRL8MqdwgFuDTmnpDkhLd9BL5q+C\nI2ZJqxXnYX/J4KBi62iGZfw49BDGRN2s6i5jL7bFvNDtgcbAOTIRP0CtHrxJ\nSkqWCR13p9eZWtBQ9+EV8AtfjnCT6ZWM3pIxeUYkwK3FpC3jsY/aNSr33mCr\nqOhREMTzaV1BPQxzl1L1n3SCp5t7VN77ioRn7IYodcRp2Ht0SZBkaOUp9pVC\nTJ5X9gbZeE3fKPUmrdqeHSoa6dLBkYcHcjTHkiFmFDUhKMQJbluMZyoESCEC\nnFkhHVXYhXlnbADGJdnaNBFieQU6JUpbD5vOug5I21z70zyY01Q+4ee6qYqM\nKad1isFlYlozhogDBCummtShvKl8D7uTpS/GhO8ZszihQLWgRFvFXxJGe2c9\ns8Vh\r\n=bQnz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3UlOHuEA7TPD7arGY3i7DTSMArSMpqVIrLcnrHHXSYwIgAmo6JRlK2hvHEYk4RholecVjJuBsccpgOGjb2QuvMfY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2202142035.0_1644917279981_0.9333132004039288"},"_hasShrinkwrap":false},"1.2202042210.1":{"name":"@bentoproject/youtube","version":"1.2202042210.1","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"a656b221ffc7e0c9f092bede5668a546628e9512","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2202042210.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-ZEMNhUA4C7jGt0nyceVgkFYgqEVhculeFr2wDEmL5a1rHSg7KmGv84g+SKCArXGt9tfpFU9G6TY+GdchcMi97Q==","shasum":"0c37bb43d394243dc959e41f8929fb03b22b5cd1","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2202042210.1.tgz","fileCount":28,"unpackedSize":1219329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC/ApCRA9TVsSAnZWagAAz9QP/1pHyDQCDaGIw5068aE3\nKE9+PkneB/fsVvpEVOP1RbNhBIge9+x1QQJwLxdgjyODcgt8q2e9wtJ1bOTv\nFgUC37u/TGii8s0dyj+dcsO7MV4b1DkgmUO2pJzRize+mjR08Dhw8Jl5NePe\n1zQLPinCdCvAwBhXkW5RyZltls89ER7ArCczR4Ltjt2UZht+DdlSLgDWy8AU\n+nWnOewVAt5mLpBKvpFqxTfVEOSNSNCOu6Tu4A+J2149jaK6crXB/G/EspoP\n90qL4iuk96xkBNviIhKh1wIGoy7cGLTKPbsuEVZOUyRZZuBVKwoUHXpFiBDi\nJrLjjjImlvypZhYcbTziqi0whMhvtbPlPperASNRPWRownQFnUhV8IFEEu31\nvuPd2KmDGQQfSE/EqMs1kA+HBRtma2EK58CEDtWQx79ViM0BXoAjueChIKtH\nLIGDmaWe8h4TKGQ8MWtYFx5ACYBsjSLx2Uyirj5MbfqGSC9qLJK/LGq4C5y8\nNLS5SKLB0XyKDQhk+NkIZksbN4AUBSGae4wGmm4y4dTZJe73pDH+Fcn5TuHF\njJxT4cSDdj1Nu4ZdL61SIoWOWGFMKg4JWXl12w13Q2YQWyzMKOab2kWsj9bV\nZl+iFXN+03XvtfCA4M1JoXj6aO+oJYN+WLmvJ61ej/FZLKuaptniyIcZqLYH\n2bHy\r\n=hUY1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJvYzxb76VNAZnur1Q5OpwydxtncJuDcPAkaOvDwkECQIhAIX6bNhAyUpzyPZVPGQ7u3l83Jn7ozbC/5fbmA2ulXif"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2202042210.1_1644949544871_0.047132792736043205"},"_hasShrinkwrap":false},"1.2202152253.0":{"name":"@bentoproject/youtube","version":"1.2202152253.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"a50f1711cb8aecae95387e7f6b1fd1862206166b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2202152253.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-IoTYB4ym4Ocs0B+U3kzOR1bV3egHTSdbh5p4xqUkUwZOuEi8WajwY2yxqOXLhbJwn6dCalj+bSkx2PKedLGiBg==","shasum":"1c5ac26f4d52e486ef1bc30311ef0ec050f81873","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2202152253.0.tgz","fileCount":28,"unpackedSize":1217484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDL+jCRA9TVsSAnZWagAAxKAP/RJYvoxCmA0elDazf0dl\nzyu13o0O2i7FsWP3vcU7AvGCS+TIRpxpBBPb5cP3VC3GTIznflJJJiUzfU4c\nTi4JIfaGVbk/ZtFkkcXd6m5Krtp5tQ031IIrCvVci8ZwgOyQZyggpOjKLR8P\nZpwy6DgKnQ5DADv+HpLO7GJJbrr1CmnBJqjD8hCAmxF1dkQ3cPwsEeuhfFh2\n2Ubx5r2vyw7OZlkEr3MWT9mZOwYK3XspWEaHbtqAHqskafuSlmzlICS2JVgW\nMchJSRuOnBpwBw0rNS+VL9UO5aSV3Ph8UnjmNqvDaJnoIn1N4d0/DLhIvTD7\nYwizBkdVuL2ZOKhbyFdZYE/xCMdG6IMmT/Q5phF41CQjwKtrY0fUkonVwjlk\n6K124l0v9wHYG6ogYeOh7zMso0Vvw6k9sDmrBWXL595zhzrCafoSrga0CV71\n/ffR7PrkVav5YLgUXa6jyGln6FT2o9U4qBG5KJsuCtGehdeWr8w9bcL2kCwc\nmxkYEWsZJ0O3LRJ2MmnhdL21Xy+oUsUsS8KSnc463lRVmViVU6ncGSBgDtQk\nDIbZ2PVO7Pqv3SeibqMiOSvfQKdHGNbZKEgcs6iRmT7xZY7CmkMVe88uGPRj\nMBIF20SAt7ogBvWhr+kZBDqocb+s3h6MRH4TopIJ8BWopVfQdu7VOjwYCN0V\nO0V4\r\n=AuPe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBmfZCBIlD51LqbrisUsNmiWd0ftWwQCWmZz3fANBqRQIhAIo6GR76n8ns0TtZusdr7Af63nIgawGCJqQzMR9YozRH"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2202152253.0_1645002658744_0.4735173484593591"},"_hasShrinkwrap":false},"1.2202162256.0":{"name":"@bentoproject/youtube","version":"1.2202162256.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('amp-youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"7548b64f77fe070829e46481b6fa247b8813958a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2202162256.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-1yXLw2L+Kf3O6YRAvraz8Um0TknNizddTZacKUTaQsD9DBjAhRh/RTWPGsjWS7mBmN3Fx+OK+E0EkQtKK5HHdQ==","shasum":"bf85d8638600fd6b31d4e693f9ba9ef95be2c668","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2202162256.0.tgz","fileCount":28,"unpackedSize":1217484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDhY5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnQA//YQx0Sto/HItiKdDX3LzNbkTFQV0eTGgLgPCJDNtbtNC2VMKH\r\nIfbJML9JwzxN4ZkXoSs5K5rZLZ6MZjnRzWY4nc88jgAgnwbjR+CTnHgx8T2h\r\n9d4nDxVoLbT/39wAknJmQ3MYhFmOrzhkedM0ewNwDYHngto77vvVYMnNarQ3\r\n7vq21oN+uAVCe5wQNgdPGAEVHf8BJE8LnFwVkN9+Q2u+7TGmp8r/d2Ql8Rk5\r\nrfQZqaC9VNqGiEr5GBZgK7MxqEHD1qwryiak7hPvKbZD27MdGXIc4Ts1NCxD\r\nqE6Iu5IAeVlvM5G6StdR4RCy9VW1APfSC/UkckcnrsLNXyC1qYJmIlapJHeV\r\npfCttzFCek3B1Zh2+inIcra8PfpxAbc8qIvEEEURIvKXFKSqTRk5VRlRgy+e\r\nz7payUJpq0HmFwrv91XW3PBxkCtU1clMtnCB0JRrpH/zSzCHlxG26mfFGBpp\r\n9QUSZ2a4j81ef9zJiWF7PkcTDjrk7Qoxi21fLfSzuk5qlNRWnz/HsbF9JDZR\r\ncUsjqxxUPyoc9VULfDRkQPki9CT58o43k4K/uWn7rGgwri1TeHR+ghJnuIx/\r\nintos7OG6I8/jcvLn0yBylMJrJmiMi1FYMgUh4/g0lya2MiPqxGp8Jnc1iYc\r\ni7KaCF8r73c98cdqynII1MjPpiMR52cEjjE=\r\n=/ozJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHrxUMn0/tSAbEeAB+Pp+FUDdW4lJji21+K/t2ZJYbgLAiEA89l18HNg9QIyezu4fzJs9u/Kq7qycTE7v+lEI2C0Bx0="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2202162256.0_1645090361519_0.8137992910056222"},"_hasShrinkwrap":false},"1.2203041950.0":{"name":"@bentoproject/youtube","version":"1.2203041950.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203041950.0"},"gitHead":"419d49d2920fbdf4bf88e8efc3421f7c37ec209b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2203041950.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-k31mtnpxCChSLyDybCW9LT65kEq2zUSZ4BAyEpElH2UcAqgH0kjlDjTYVAe1wt/qIPxfQwsPZEmrR3mJM6K9Cg==","shasum":"2123c8c2930720a200c2541f7d32c850134e766e","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2203041950.0.tgz","fileCount":28,"unpackedSize":1577400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMN0KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmJA//RJerv0znR3qYoUr+3PV/jgl3QrO8xLamyjyffTyz3HfwKWC5\r\nD2DuxooKjmIpWXWbwmuxg4yM1QeTV1agk0V/5FCETGEt6r7e4njYm92Y0P4B\r\nPnMtmLXCf8lPVDA2RXFae+CuZEBdsVtbMAzL3KBja9g5C44Az4ku57SJMRWh\r\n4LIxF/bQNrBTtf2yPRndM8wudxYa7fnNttvzVmwS72D2K8TajNL1hZPIzhFj\r\nNp4GuZDgmdAWvKHntC8z+gg4331gPz9gAiS7my9/rNUvayFlQEzFP9pAY8e2\r\nWQyiWfRvugYBm06koQuXk0yFs/XfzqarsLzZFgyfeEUlVDZovO0NTWJgxM0D\r\ngd0SQUKB3BfMD3LXUgHcOpVW+cZb6FnkrsWeKrhmD7849GQ4yAOnqqwavHnz\r\nPV7Z4mmv+FxdEKaoxWgEt05GEQAnKNQcQJ2eDk11JOa4JXoZFEfYVkP2aMI7\r\nnQdcj1NEeCMtq/MP+01ZsobGa32CdUCtENsiS+bIJz21bh35fVn22DOdvehz\r\nJ0xXyPGAzlsZTaBo3N87GgKNcZcWDyAdqZGjL0HvDdzZnfK16mZTh/kclZwZ\r\nQ8WaHBkKBiXkayFG8xkGrDGsivLw0GfkqmTxVfne0xTZq1wEb7Xhoe0t+8Ri\r\naHxzkp9tcMVdzTFpRv/2VkjqR6LUhbmJwKU=\r\n=eGOl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICBDMrIZUntb0l+qnMmy5mbG1I5sLh5G5Tog8Y1a8pCrAiEAinrVWzt4lORNnCd4iRK5w81k1lRln1mr4Bvg2Rl20qQ="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2203041950.0_1647369482590_0.4082024995351192"},"_hasShrinkwrap":false},"1.2203151539.0":{"name":"@bentoproject/youtube","version":"1.2203151539.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203151539.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"fc739c0d339dbae236fa53a87188f5f7ca58f25c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2203151539.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-BiBEbILxUitkeM9bV0jR1EL9/33yOK6jKNvAaazWnDXBx2A6UQtaWRkAuS7fYwgD+yMS8v41gKqnMeOqCcah6Q==","shasum":"e6b25f935567613093f23452acb1393accb8f6ac","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2203151539.0.tgz","fileCount":28,"unpackedSize":1577400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMZ6qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBAA//ffuJyLF0SC7ZljPTtLcceKg+fE1ghqK+qycSk/aM5rSRC1Lv\r\nYVdXyNlT0a5hiSkr9O59KAS2/F5F+ODiJOcxZUZ9uF7I6aAaJQpLxwUWolVC\r\nVC8+a7QEiJuNfhSlk8hEIdzAJrmw2g7RAyIbxkgQK6nzoA0jRtlwj5PE/rhV\r\nzOJ2XK+N20k1LCcYAqCOv64EFleh81jdTs9B9JeEPAGZ8HcwtAhuk3ekR8Je\r\nWYnUGKHRjHP2OLTB7IEebDp6Xfcskm60NqDBJ5CDDh3v9PgMvewjZA24Jlpf\r\nGykEzHGwZpb7xZ9c88iG0Cgxmf0NCNlERRCXwahGjJKiTDHdB0586Jtg1jEO\r\nrK58ObrRapAGjIZdgiCxb4nUlkX3Ukxrnf2HzIN/NQc/mkQFE3Iw1Z6o/Wsp\r\nBnzW5xuaLjbup723bTPwYcNVTuxt0moHrGGl1zX20X6zR+y4fbIIR3wnfZVj\r\nPvyGpA6hj+L2nNMfnTvTQZ1vDNTJmpvsGAMOYRSfMYGKfrz5yGwySUASrMlP\r\nMg1USzRccwjSM8LjBCMgDRi0ZmpOxjbsyRioJYjOyw+L2Yazjv83/T2CBqJY\r\nuW5YQoq/h5DKCKemmWgmk9ojfx88tnODCKgAwugY0AlxdLCdDviieLqKqOTZ\r\nT3oe6u7DrjGNDPZizA5xUbGLhn+bu9+ECNg=\r\n=x1Iv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA0Uo/EVtO72Qx5k4LkmuqfGIXr8Hl19w8e6icaKN0aCAiBh1uSj2FawMrlohVXhjCqfPyWoprqr/sTlCwVONvMhsQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2203151539.0_1647419049753_0.9426336441941734"},"_hasShrinkwrap":false},"1.2203172113.0":{"name":"@bentoproject/youtube","version":"1.2203172113.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203172113.0"},"gitHead":"96b2159ef70d24edf6c33303cb76a623a4669cfb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2203172113.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-7cIhOjB6qVl/ZJYM9IMDWR/e396tqbkqO1w7TLwGl4m41QA9ByiHRmCsYXdoXZhcfxMlbawhVePzFv/51d89vA==","shasum":"47bcd3664822400f0b039de8ccbc15a86fc8e995","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2203172113.0.tgz","fileCount":28,"unpackedSize":1577940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNEH6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTOA//eiwBbbkikCCzMKiDcg7YTJPdTzLXiV1XKUbjgngOCOx2cglB\r\nlZZYzQ0Q2XWSYeUQ8iLCCnsTYs0z8mFgZKIbCOAhAKhMot+Lw8/xUipUz4ZR\r\nIk12xIX0G79knZdS9cujW3WK0vFxkent/JtQ9B3jrNswYSIY6rWQaK31NQ5j\r\nbVcVcOO55T7Yeuh07iSbiszz9augFZme1XUYapx1OEjwlN9hdhmyqa+nbK4a\r\nJvUXmVsP8O74WbiI5GTpkNaNbuI8oCGqoMsJVr0DLY3RnmctiChBJSotYh+2\r\nqjYNSEv36/71r3oJhhrOiV/9QRzJysWkNzoVymtTYCKXBAxRHcJLzW3DnkRZ\r\nfEZrfMO9JOqbYK0+flKMD2kGN3sVq35YYgCJh+BxerDeYokR7ITfp9vyx4r7\r\nGr1S/X7RyDjakakHoYXv7CobqXHumDowsYrOv1vf8DmvHbju6ipVFW2IqvAI\r\nCqfN5xCjUuQmEY7hjfgi5nR+/sQLjyqENcOpdDZXyTFwGaS/28XAiMWWvq+R\r\nOvhN9eEFW6/ljzFoqwNFEjBo9nNSQtpmwv7lesfbJY7yxb2r6avP4MGvd9qZ\r\n/N8me+C/B/4PzdMNkCCeP54XezV0SiogL/K4u5U2D9KLOHf6nvTNmHkSbQMt\r\nmzwMP+x7/s9kZUTVeCYdO86edXHGhSYtWwg=\r\n=WgFX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIGooxLo4DqRt1Je2WhIDIw+e4PJtlNMD3rZM7uxxV/XgAh9ljKdo6iFqD5OSPRKAsY0Uj12NcC5YF7Sb9da4KcOC"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2203172113.0_1647591929941_0.33190593607178087"},"_hasShrinkwrap":false},"1.2203221937.0":{"name":"@bentoproject/youtube","version":"1.2203221937.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203221937.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"11fb2607ccf78c526a38e31bc141dbd3ac75d326","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2203221937.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-OsQKpPEwn0D0O7tBLbs2xXD5hQaX4qp6mfE8XkoqY6LeS5r8aIBOlQ0wuqQnhKJcuJXDrvaIZUwymNS2GY6Z7w==","shasum":"52d6d1b1a556a9bf67335394dd98defae66f5634","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2203221937.0.tgz","fileCount":28,"unpackedSize":1577940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOtnnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaRw//WeJpRXVxJJ7OGenp9QWiaXDYEDLt6wjMmiSAEuwjdXD/jFgD\r\n+fylXqYgsSmKK9E/XnGemoiKuB7jgSbiy2isY+Q4lslljkA2iUF+8HyplGNY\r\nn+Hg1M7jNybHJIUJpT8Vsq/gyAjALD1ysHBkY3YQ7lYCZfWy8cY8RjP4C45f\r\nnx0XpnLiatCMjdztpmLEzTs+ITEik0cs9az0kK+H+nPi5pXVddTmk/Yv2R0j\r\nSH+ko74eO5Tgt0wabf/l+7KYRO9DA6ClrQpPhfuoxmkvmVJ0OfCYZ5Qf2KiB\r\nVkD5Y8afOgZqi5o8oebOv4Xk+Fn+o3ZvZiAK68aTWoUEBmZEzu1b9IA1JaYl\r\nnqt4ShpkwPjBhIrsj6B43h0v+h52bCrIWBqZDIcKI7dgWs4kIR44MbtyWpot\r\nS0IC/4B7rqkXeuNw58N6lFNYLXsqEjaV0olSrGPluO/Ku+/N7yV4TD89Zpd3\r\nVBC1yHJ8zhAtiBDe5XDQXLa3XtqHIghTh2VR3IGhgcg25MAbUgm9P6rJZxa/\r\n+sYeBerqcTBG85vfUyCKdQUCjoiAieykO7ojZeaDQxoakiVx0CmQzH2p4yO3\r\nH4gqDD+18NBm6E+ZxOF0inLxdwu6QMw7zudVKAjP34UvkGQm7Tkwe0BzEsfS\r\nqyEsmA6ot13wJshRirL1lY39WtGGWThPjUY=\r\n=nt2u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDmqMrd7cvO30AA0RUYlcyMJRcxvilymAfzJkT/eJHDOAiEAvN3JOj9v7zHLNSAGbt0ASGUF76FY0W2FbZb15IfhuzY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2203221937.0_1648024039060_0.6868825112031693"},"_hasShrinkwrap":false},"1.2203231914.0":{"name":"@bentoproject/youtube","version":"1.2203231914.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203231914.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"9bf7cbdf0dbb4de2bc6b81fe042e52c990576b61","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2203231914.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-HHiZLsn8sp0QAKYkx62fBzmBDDTagvYQ3Tk3uXAehYCPuU6vcgBQ8qM7vhLKmBQGGU6EFI81avW2xbaBI7+U0A==","shasum":"56c635f66e57d3b6d405f0f3b45745c7e531b243","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2203231914.0.tgz","fileCount":28,"unpackedSize":1578042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPCsGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonKQ/9HZqzkrlTK6epMa5OHSqd+pU4hQHiG1UFWH+hJTxmpFtN2LIB\r\nTHRxActyujNPvHgX1ln71Mm7qlbss7L9nhyCGKwSsBpzXd49QZfgGiwM2kWx\r\nAPvpSkSo/dMO7ZjzAHSOX40ubEOo9/relBsw9QtzOISnXbPoTAuUsN8Q0n2q\r\ngnZ9C2T8FHIuhA9Lswt4f9enA7Hj/jG7I9lPWvcFFMsds5o321dQ13KQVe4a\r\n4BEc/qxEVKwGw5tuOI8NHDDCLMg1/ErpfrpqJ/NR+bEP0oFexWlhg+SoVYpy\r\navdIVQLp6XP+QqbnO+J12coHTXXGjrmzp5Vi4LtAQHN867OQH1rEnxjgkNVE\r\n//nnJimpQdFAWpPk0Dky26GVWgeE71mjtzWAttwIT+afdudGUsff7gYiKwpl\r\nwtSDMH19skriahBrqGqtzlpM34Fapsli43JiBXZm9+HFp1Bxo3717bNpqx2u\r\nUAdetxODftL71WU0XwVyLWYLdVaDuYNWfFCXD7HKaEOg2MAa9kuO9+u+Plq0\r\n4JGjB26G1IylwaACFNg4dRss1t5liw1uBKE4YN5MLETvhAQz2Z4fdSHCmKyh\r\ngpcPXWTij+xjPiDHtVwJ7NclD6vval/9Mi7o+0zYVpPyAm9ohgjIzFH9uUcf\r\n1Kywjso9lzI+dlD6B6s8scsUJiVMxH+AwgA=\r\n=ic0z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNIdX//WC4XEJAl6L6j3aUAhHw+kqmSuYOUZ7G9UBDSAIhAL0EZzM/ZuUXQN733SSDQPk5Mkcs2j0Tndruk9u1BxMF"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2203231914.0_1648110342057_0.7406187113085241"},"_hasShrinkwrap":false},"1.2203101844.0":{"name":"@bentoproject/youtube","version":"1.2203101844.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203101844.0"},"gitHead":"9bf7cbdf0dbb4de2bc6b81fe042e52c990576b61","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2203101844.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-up3WbJFOcFTEMuo/0STLcpMUGhCM+rRCfujXYzAp8/kgTLb1EcxlwUX12yG/wwZLpzPhVHxVmaEcYF/EVNMp6Q==","shasum":"4381185bc2cc9effd480551113db2acf965221d4","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2203101844.0.tgz","fileCount":28,"unpackedSize":1578042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNCGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOBw/9FMQ4KiW5KhG8y18hSljW01q2esfk4+W31RPnGwHOF2OvasQ6\r\n0pA4a9wgudiAoNAbJsGO6iTBNT1PRcZEJzjcq+OpeBXHcLHmw7F1P4qCS4Eq\r\ni8ZmOn4r4qV1Oa3fgC83kaq8Ufn+Ta+ZCaYX+Ib4kSPHGgF63VQOJn3h+KuS\r\nByOpFH1CilgXXhBQns68lZnyPj+x3vMKep7ZsSXWCjkZHpl3W0aJIG0afYYN\r\nLwI93riVFX9oWNLmLRQranOhV8fQz+RJwUGRhPbZW2EBZKlBfXfigb0iFKYa\r\nnDvbHpMZyAI8xsJFkrKuInK4V5eDNjNOn1yA1/7ItU6IvhAsCUjXmv0Otbol\r\n4qDTpmcnGBdc1aaog1gwz3s51Hm+jDyRcUl/GV6BE+JZN96+2S9XtnnmciCs\r\n/zjY/WBYtB1KyIRAL3oUtPFK58TEEC+xbft9X7pUD5oqeD/s/ZJ2x2UWKkeR\r\nDOPpAjVPw0+vVJQTgYGEYiDL9Kox864lM2n7BF2gQiP1Osm08AdNvpJj95aI\r\nl9Q0RazL/VMdTIe9zLcjnuXoohCA+0iqGN2beECE6QKivSyZ+SNW4KK5h8s3\r\nf8U2iiRTO5V2B2uuajvPK7OC54rJu02ZRwk2BOSX9/9W/Ubox/422LbE2RZ7\r\n/0varg89TGYY78SRKJggoGJyZYdserzy4kc=\r\n=gwqE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtFeQew4Udu6XCDLtB7Lo2AIWxj7o6Bcrtq56ERMG45AIgd4RZvsW2bgDHIzROIkAYcaQcs5X+o8+aUYpXeWu66Tk="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2203101844.0_1648152710097_0.48230669434565"},"_hasShrinkwrap":false},"1.2203281422.0":{"name":"@bentoproject/youtube","version":"1.2203281422.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203281422.0"},"gitHead":"f74833d1e2b0d9176900cb183c4edacc4ae53986","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2203281422.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-H/kUo68RdnIvcIWFV/p+hzxQN65lFe//ZHN8C+HZldXy0KM/cPI6rv4MiPMcjcSYL8GOTBZhb8TnocMp6C6saQ==","shasum":"04d41b26acfde16446bcceadbce0076605b2fcdc","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2203281422.0.tgz","fileCount":28,"unpackedSize":1578042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQsO2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTNRAAg3bNlzSHG+D0SgShvWHOOQ0aEJZAp2k+uNmW1yhPPZLc1WoF\r\nJLfE8+QzsHn5yiuWUjjPPeagww246imV98m1Q1vNGZeKIE/kmm01MHsRC9GK\r\nckc030vh4A005yOZa4d9HXsKh57rgUCcGnzA1AxFgbW6ByUw+LBt2hGdORn4\r\nOzcc5elyLsYT4G0oR1rRvKllzo0PAbnik4jtqrVkEpEdwb4dszNzH85SPWxq\r\nYlqxt2m5I6jhp8DFBD1cf2mQfj7ptgUywpqYDNJJ43AjhDjl/jty5gI4du/h\r\nIUS0dZ3yJ0xTsdLeHFishu5+gU2+742r7431iVdRRy9fnyK8kkvFNdjIpVj5\r\nj74B2wioB+OwDnfS/dI9TFsJoOgwTo7xaDm+e1nwr/8HdPnrIu1d1OBgHb9h\r\nYY7zB3jRINqQoNub6wh+R8kmqSMa27dl9334Fs6mbW+8S5KvcZ+xaHheP9Jn\r\nY969DyPoKDdzLxjzgZj0fpze1phkzjC8kb+aT+cxhoZCtN6NYoIFRjiMPTVW\r\nywmZaejv2mGP3h+TGnfg0WtB1RT/cQA0qzYM5Szv6OKrJVcC3EkIHGQWfr37\r\nP+lPzZTgM2OYNVJRtMjSTpJ0r64cF5PiTKu5Fhu88jmWti+W+X8UEfCQuBeE\r\nEHhvq/WhqzR3mcXyuESreb0Z4S1HJpsoMVk=\r\n=goq+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLUZYi+a+7O9tPunf43I0cA20VEK4jTX0o1B3xOm4vgAIhAIHdztL9rI1LGXQjvwhhgoiEdrYHYrBzKjv6qnQpixEn"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2203281422.0_1648542646094_0.16985025220113736"},"_hasShrinkwrap":false},"1.2204121632.0":{"name":"@bentoproject/youtube","version":"1.2204121632.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204121632.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"dce11ee1542a2d10e47b8e9875dae137f4cc1b0a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2204121632.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-Bd3PS0YvFtK1XsctFFB13SaWjiAMhs/8+zwPse9t9qlOiQG3hQx8ZBW6s3+3Pidbj/FarwfE2AgWo5OaToML0Q==","shasum":"57175c871ae4f2858ece51e8ef1c7ba4edb23ed1","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2204121632.0.tgz","fileCount":28,"unpackedSize":1571164,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICgUKxY3oPs32wpWItuTB3K0crw+JwHfVu9pmWqX2m27AiEAlgpdnKEbYWdFbEhwJDAER2ewhsx0mLjgahyDE/3jpY8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVcJYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1dA//fBacAptGvcBwkOJuAdBzYWh++TqHHBPI2malYkrOXEzYEwR9\r\njCjef55Kd3cjK82tB0blMyU1TxombaiZn2F6dfNxZOZcqZKfKYE5xQeCYnnd\r\ndur3Zv3Lx/LZLb9uTSY4Lk+yX2Cp/yQz2lZRk3KilaeT+WFRZL5pakK118Ob\r\nl5vSN9UkcgOO3MOwyOQsUpMQVOEOBO9oM1mZxUnAELEATI6IwUZaixIETtT0\r\nNZllVKAHg+C7B7yqF7rQ/mCcF/DqwuMDzcioO03GlI4uXBcoAG9QFJkBhH2x\r\nEvWkZyCPnVF6LRboemVf2kCgx+BvCxf9zHdkW6eA+cxo3axaKZ1Td6U/uIID\r\n4+FIMEDz71GqvHc1z3h+Hb4DQuFdiRqIKPs33wH4MtF2LuRejpQKvlRUGUFC\r\nTkyCTtcrMBDshfIAkV3zgirdh6sJ/YyADr+hFFRgxMWrCVRG39cuvXD9pCJs\r\nlvzHgQK81RtIKxJHUARR2U8ZwEQMHY8rJ8VVAdjHnLs1LZxWhGwvGCdWciEy\r\n6kdJ621l1+uC7VIh4gPIAJHlPeLl/ha/pJrek/QHcTrt7xl+8Dq8E4bc3KT4\r\njhLf+GA9J4dzWtLg5FryoO/SAP1F/Xbzr7kE1O3RLhd3GtZhSAXIqtLjvfpo\r\no2NbbaFjvfmIPVVeG+7FzZQvvh4wJnHdPa8=\r\n=1Iba\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2204121632.0_1649787480484_0.578849277674762"},"_hasShrinkwrap":false},"1.2204122000.0":{"name":"@bentoproject/youtube","version":"1.2204122000.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204122000.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"9d10200b5a9784c35ca9fa16b1a4b3078aab3180","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2204122000.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-euOGft+gPS7S5xoxQBIgmSi2ax7Kd0Lx8i0QnejLFY4FAs67ofbq++sI8gn6yIHsFjZ7ksQT4p0Yt8hvmbciYA==","shasum":"de52a5a3e24d682315fab87f69fe94e338b2fe80","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2204122000.0.tgz","fileCount":28,"unpackedSize":1570844,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAUVCoJN8xwdzVsGvo5iNyMbyXrMpF0EIuZpyYvCGtnZAiAwt5uWT4AgTXGILWILcxOeSEcHfJrzEA9m5XqqhPCbmg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVorCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqI2Q/8DTwP6YnzeZ/VnZIE5xqHbHu2IMJFk4sey5ycBMuZ/W+Pjjn4\r\nXNv7ckG0IxM/B36hjM6341uxhMo1hOJBdBo1aSOKZPNGbflbZMdOX4RB9fVd\r\n9SSinDkrrrINsIsUL/uQtnJYGGwwFe57Pxw6IXm/XwKiOAw6Dp9MmgDSoaeD\r\nkqTDTKCfFIQEIk/AHQyhyihZNY3ilgAZtpEMFRWcaW4yBvhvoHnBksp9sVPF\r\nK15JyAovy45N69VvJxrnDDeQokHLHZ9TKs62FarNkjVz1bau0VdZWM21z5fr\r\nj908MX7XqAcb/CoKwh+CzdQJ/4ktMFmjCdQeS7imikMcFEaMxGdcpfB9lfLZ\r\nuJI30q25nMs5UYi4NXJLZ6lIWZaOldlM5zFeH94TUooWTRqxJ/8b6z0GzF5Z\r\nY5rM/zkSL+LRsHshaB+sKySroeSNkBlY5HGX3uSBXOHDaIxBp9fJm5vULDTq\r\npjPEbvSBqpLJezp77tg4INEpiwqFkU9Isusv6hFFpDJzSCcHv5dTaGmcmW9c\r\nHJWt8VN6NxxTss7/QgDOJ8NjsBjYd5kr/EHQLRDme3qjbqhcV0Po1Z/iwijf\r\nDytlzhOKOax7WdyGA5QZg4A0odCIsFHof2F7eIWM7alo28lUYMZ68ckEsTLp\r\nmbLDn3MH7ZGXffaIX/TfQzbXD5wGrpNoSaY=\r\n=dqnH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2204122000.0_1649838785766_0.17738786052874178"},"_hasShrinkwrap":false},"1.2204132005.0":{"name":"@bentoproject/youtube","version":"1.2204132005.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204132005.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"26ab90e1d3f7c29ac76e3fe33cdbeec9e828eff1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2204132005.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-sxnAyfkBRitMFSV0NuPEqlynPDkytrSSPPbfGV5HVlkE2Tt+KGhNmc5+9jRekTIB7z5ivgR/+irrMSRlTV40iw==","shasum":"62943131ef60bf55cdaf4bed628fef1066a8edd4","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2204132005.0.tgz","fileCount":28,"unpackedSize":1570844,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2eIGiNyU2C1wZ3ZADUP5CU3q8Yc7XHS8pyoG5rSsBYwIhAM1FH+diZ+K3u6+0Oo2TmilieF8ko2CwAQH+N+qGV+5a"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV9y/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDLg/+LZgetA2m49CdZnG1qCq522IV8TXxl2mGTokSDpAq3MOv6Vrn\r\nUQCQBQ1QvQHdrrhlVKKm5+2Gxydzx86+68lMb4hb4x34gVadWOpo/a/b3nlb\r\nMlJY6W3CVa85UtH1AsvHk6HK6oUhHjyLqZHC94bH0EJyXwatvAq1SM59G17R\r\noHXvpYjg/Oj2IJY8AapWx5K0P5xNCc7w4tqTP3gf6YibRMNL5HEISX1RAAQP\r\nZHZgU6kXBlwVHwCeYx55vr62EwuB1rzP1+X46nqVes90BwFbTwCglfMRqHc/\r\ndUArQgTlgQmkHnugbdRopvyqCohEqMw85RPekRiKFYau78o+cDtoiE5F8mJZ\r\nMAA8q4URkOfjtWUZBIHroF4IsqOvEf4p2IjhY0kfK/48Q65bnTHEBz02aeeE\r\n367FPxLJLIqqcfneCH1DJhGLEG6NAPHNZHpq24aOgIK+S5Jl/DFSKoQUzBy/\r\nEqKy8JZGeDNuJqRlOppyCcHtQwCKDk5kILcSfnTLcKGfumSnstvewH3lfr0C\r\n17SOU9ofkhp+vyDP0VSALyisUce+pwt+CAyHcwzR7ya4sQPLljNrMnV1UarD\r\nKsV2fzAYazVikeA/Y8B0c70SXACK73LCAAFZG2sdnTrkHSEo3xquXLiw2Fhj\r\nOQ6y+OhSNa25dt83ycB3KS+Y0kisC1JUIQg=\r\n=zvOq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2204132005.0_1649925311563_0.05124345223141691"},"_hasShrinkwrap":false},"1.2204142048.0":{"name":"@bentoproject/youtube","version":"1.2204142048.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204142048.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"32d29a09afd66bca55e024a4f21b1cdf6690cfdb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2204142048.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-2dIyos3y40LVEr5iiS0IuVcU9TLxAM2OzRscg3NQ5LMP2C4dW1/8pFRTJW63vWROhAGkwvCN3MtanRmUQoLnUw==","shasum":"141c4194e78d6d9797fb28cfc4773749b7ba4cfb","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2204142048.0.tgz","fileCount":28,"unpackedSize":1570844,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHnQ7SEIi1GhzuS3G0q5YCeNx8H1KxsXR41MJSxwco2UAiEArtgxqbHHYGmQ1ilPx7+YFN7WMQDzNvZwh8EzsCukcoM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWSyrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3Tw/8DEvBJZVUpihB6gccgjYewoWEUKUQZ4a6kZGHQrZz3Ik6H5Zu\r\niW5F6C453wtvBpGrlrxbWYvMmqmPW35NstQD5GrWnSoh0dvnM1NHrivoAUYv\r\nuNPmZ+dSyzi9H1FLcYElGqY/BLIQqFC5Tfm0WDFjyMCY72pnzXwFnRWmS0FU\r\nH/XqkXkDO/Y9cO1kv22wlo4nbHWX/ut6qWZOyNu833NIDLx3axx/ftn4wyls\r\njlkZEL6Jx2HyVTXyPnpySKxtYD3oaFy6ezscobe6wAgVBdFG+jt9JUYsUOKo\r\nB4YN3vjspdw8BgPGvFBZG55oVwSsKi5xBhuhHho8qj/4ygHzd19OO6rYBMfh\r\nW3rZmNiBQyng5efvJ41VyVsxxuRaeprolRs5EHZH4nCUqllhMDND57OvtAlD\r\nAmiA8fVmBb7R8rFF/JmpJ9j3a+Ly2tJICWjez5QDxFdptGmCA8hKDZOHi8aN\r\nL3aIYHDFU0l8xU/BMUTa/toqXKJVcKivksboArV4MLwgJhgfmQtD/grOU/sU\r\nDRjF+SPJRzEEzubAg0NDMJqOI5JCGe9J8F2etEV0ncoNkEXG4ZlMajSS8w3n\r\nKXJ2zmFY6D1Dv6LGlmfltgE7Sbnwl0v85WktUCCNAK6Yk/0sI8bPXeFPrcE9\r\nYWHFFZ8u3LfZDE3pvgma7V9e4Xl7Sv0L1lQ=\r\n=6kMA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2204142048.0_1650011307513_0.6788694720149191"},"_hasShrinkwrap":false},"1.2204160405.0":{"name":"@bentoproject/youtube","version":"1.2204160405.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204160405.0"},"gitHead":"a26d51722a65f29aa7f77872b7906f6e7ed62e9a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2204160405.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-s7bGgkF+Dck4xEKDnjEESM0v+XGoXruz9E1dHqhb1JGEf1TqRAiFkDPhdaLEQvu6Jv2kzpIL0wePFR2mptkD3w==","shasum":"6fdf0971a960f72dfaedbf45962e50169c63cd67","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2204160405.0.tgz","fileCount":28,"unpackedSize":1570844,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAhqowg8zAg/YDLeY8GRuTb7kqzyGu4Gm05WqPZ0mVZ/AiAYXxy8Vs1S2feK2O1uXheYJwcEWPmjYhhiAXqiRMLAgQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWn2vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiUw//eAUiNPJykoYdYzAcJfK8uhdWoranVLEk2yQB703GqPdPHWnB\r\noM9fRvG6sBXmfHwV7MZ3lYwvStFPnGJB28NWFSbykDQVwU8jpkr0GQmC1JtH\r\n9fc9EF8B78s4uln7DCTH1JKwTgQHfVAwn5D4osMbbXWiOYh7lZY37/HsjxuP\r\namtfn+n3491sLF3Z8bK+MkI3vxPC4s4RFv+U5jF3aHaa0s8ec12N+KMa9XMT\r\nUdV7wd9jYm1f9fQxfOKOrMd/59eXLz/9NVyLHsFFM7uCMYOGX8RxZ7QLDH+l\r\nHfODQPxNfDSzCk2ahJnSj+cwT9WS1uljBOrkI4o/PDvD0nzouyeZf4td7DDQ\r\nOfaIbf+MI/rfD4Tx6CpWyhgu6U/njQSr/xgQAqpVVchWK86xBNtffP8O9Ntb\r\nJzJ+8YLpJstvyTbZBCaHqxIdW4rV6MmH9TQ75o6jphLcGhgRu30f74N/423g\r\nIqgpnFtPPyUiiwLGLYTKi452zU0dTmHf1l1A9OZs2dloJKbhOrlPKXGqUOUP\r\npPX+/0yTala4BK3ToGlMdTlNn1AfB9qrC/yuGsAcWDhz/lkyUYV+cfr9ntrL\r\nfpEtN4o/QRMkveuEGtc1plmrQCtXaPR1x1XxY0ewyOBGwA3e6pUvqFHsYtkP\r\n2QcrCq7eeBsY9KL0BA9LeIPkBqP3DJXyFAY=\r\n=Enkr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2204160405.0_1650097583022_0.9125159935910756"},"_hasShrinkwrap":false},"1.2204182206.0":{"name":"@bentoproject/youtube","version":"1.2204182206.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204182206.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"83e7c80d7406923369ada8c1a7a5dc660ebdcad6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2204182206.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-C2+vjWNMIF540/laeu7yNe8octzoFDm1YeCYYNNwxN/z/L70JKEcv3Iei5GyyAWrd9Djqn3gbaQlkfOi1pj7KQ==","shasum":"47c53b2f31b4d773259bb155e2ecbb576222119f","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2204182206.0.tgz","fileCount":29,"unpackedSize":1572268,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpl+pHv3BZxfB4ez2bV9QtRU5s8DiaeFpydTcephdakwIhAIQ6L1jmu3J9ptDj3ETg7bhfa57ihhYRAKMyoWwUQZAj"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXnOBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmph0A/7BXQ3m4+HT5bSpjKlsRdipT8b253T53pUhWrMqIw+ry497MXC\r\nCPHEtoX2rdqWfGKPQtsj09gllhfeqtJBEYPXQWmogO0W/lImYAkppwuCPnOS\r\n25IF1JmtsXJjJeavZVu86hBf1xX17SNW69Fd8IMy4wNW4hHejPfUbXZEzeMZ\r\nnIXpOsx9/2jTMGu5gsnB7MP1qwUaU+jcLGTySWJ2YiQ3PzVAfZF6HOpWHsKQ\r\nMhQJAxbf6LrXNjNfqRB6CZcnMT6XcxwoYyO3BHTu82JMiG+N3XA9k61U8VGa\r\n4N/fPZKxx8AXpxRplrnoieMHZaLupOuVJjqUqcnUjEKoyXse30+Gzc92z8dj\r\nZslu9rWo3F2eM6y/lSfdZxFJVmk836N8h8uoJvx3gzYc+SFQx8pQonE/HsGI\r\nBuy+iklifhFvRSAj/dG9lDMAYLHRn7t2eHxg/l+YhJ57CQcPHZTOopyiX3Ps\r\nqeV8hPYi50POE0g7kU3gH/PphIw5NlSQ6jIxzr5oz9Rs+NuQ98q83atkHjXn\r\nOCNht76dj7uo4ussIneWhTEU1tc54kTJXZaxgOT/qsfsq6FirkfSX2tqmJGW\r\nTfhPSH100yw/TPz3lzeRw0RmhVtLtNFDYYTt03NgQcOVAMJSMvixVN5SNXyD\r\nr8KkF+xTxrKpk5BJ1CjKNVbdcA5QfoQC6e0=\r\n=bRec\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2204182206.0_1650357121685_0.8614853858605631"},"_hasShrinkwrap":false},"1.2204191429.0":{"name":"@bentoproject/youtube","version":"1.2204191429.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204191429.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"2ef2d96efb4624b0ef0313b60134c9e35a4e8429","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2204191429.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-4b68+3KppN0rrdhiee6hZHU3hGK1ZOoME7w6Sg7jQj4p8xCbgU0BwIwO/QOqds5sKwwm1A3Kufs9rkAyWciKVg==","shasum":"e2e75e659d7e1518e9f3184d2b4e4048ff64fa6c","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2204191429.0.tgz","fileCount":29,"unpackedSize":1572268,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRqGU9AQ7JCAriI4u0NewcfhnUFW8xGRG94hdJi4hX2AIhAI3UOOCAUbbTql+bvLewZWwyg5MG062YOjMJDSZm4Hmf"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiX8VmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovXg/9HJ1T0dtnjP8IY7B890pLvjRaWPpVwwUx+P0JdD7MR3MNSpyu\r\nXTBP61nd9j/QQJSuBxmAZyLgkROaRbLNA2XsKUXpnx0IDohL+FwlSalnbEvU\r\n4dCYIDaCVuwFNtisPpAnGZje3t2zOIKgTZXA6+6CL5E6AdYYAerSJ1QnqqQY\r\nEyMlzvOW7ITRfOH9C3g7qEb8FvB4VjPFCkK0mh3fD1MpzRi2hUjAZsFbeAKH\r\ndTk+6LEg58N2SDFbUFbDyo97X6wjJN8j7UFy80OhFSqkvf/mFRZJDJlHUNRn\r\nPxoei2S/P055R56nlX2m8ihqQ5pkKm2Y4H9D5C/Uf1kEGiIhAPKdf7GT5Z+2\r\nL82YrX9J/C546TY93ZqWYSICTvakHovJUZFPpWsiWpjyPVbA4dx1Y3Q9J+JN\r\nvnKL8/GeSlyRh5P0jyR3xkxNqZL2fwUAGMte3or8zuPwM9hKr+7ORkfa16Zq\r\nSXKkJrK9/k163sqHNowlC3abn0lr9hdYqsbTSn4db1TuOUhK3giG5vZMn/Kd\r\nvRn2ed8mG3Pl7pdT0PhJ1+DvGib9URdpH45gefK/JD6OUmSWzeLklHs8oR5z\r\nigp4Z+Fx9eyGZLvK1R94krdXe/We1MVcPf6MHt/ooQFqdg20+0QEA3Ju3JaV\r\nR7Nod/PqTA6sAA4UmtqmKEtE7sgIc3VmaRI=\r\n=FOZd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2204191429.0_1650443621996_0.3649991712752838"},"_hasShrinkwrap":false},"1.2204211736.0":{"name":"@bentoproject/youtube","version":"1.2204211736.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204211736.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"01dad70364e4b2b9707441c2c8ec973e1547b195","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2204211736.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-mtjFEdyXXQRK4ncJS0/CvI0nOhQa7fOjwh3wZw1JqZhBms7HbYE1Zcu5DIVSqMFb1C0aAPI53JYmaZxWxKFS1A==","shasum":"9c9d3407d43089b3d5f6326869c44fffac4834e7","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2204211736.0.tgz","fileCount":29,"unpackedSize":1572268,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFBhU6ABTIVsq7fU6oObYFr4v7l/kYbcjq+v5bzGZxnjAiEAtbHwbELmy5ylmCFdkhf66p/xtSgzkrIj1jTTpm7vsx4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYmcRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8hBAAn7JiR5buz3CoQhyIhzOAG0BiDjZ2s+6HYnGuKNu57GK8xG+H\r\ndB1/4QlvRc+6seeb27Q1Vc9jRxvB3tFnnJmYBo7CQ+ssUTK1sSHdvxo287HA\r\nTatDQaGz/GiVPcriV7E7bB6+B65BrVLniGNdaZ3Su9LYazCfH9WSU/MCWNBl\r\n8DtR8vOc6j7p2It01rhQbHXaCYoxtRTiih4iEQjpVHPTBFLF28ypy/DigxbV\r\nbcRspmSHvWS+G9hn5JXEq7FJwFv59FudG2MQ1QzDYEGGYUTSiRn2GNpvJLjE\r\nmPob+sOPpIk0tU61a7b2C8MwXD0k/b7LOo7xzk07aIg8TnH2/W+T1LnK/uys\r\ntLtNlR8YQQnhN6hCNA9T7kCbzm42FfzDyII+pvu5xNPq6y0aGK4mGq7hvBoo\r\nnc9BIdPfIK2J3Q85XcayDEug36tHtdKc/JfG2DtXpftlIhFXK64qA4BnwWUD\r\nil698RVxjRRwnZ2Afz0Wy/gfXnkLxJQmQr23qF66Ovz4znoaQFlwxj4xZbFH\r\nOg1+JZmUTHq9Y243B82g71BHZ9n1XRuCC5d/GYhWrBmt+ibRPHmo4iIDywVH\r\nU6vFprMz0prtALdhG9PQ1KZagVkFpNVa1sfD9mL6mLkM3WSUoOW2nch9xnFn\r\nIMA0au9dEAeGefXSVUtWjPOe0pjIIc9JI9Q=\r\n=wukn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2204211736.0_1650616080836_0.4021050177794476"},"_hasShrinkwrap":false},"1.2204221712.0":{"name":"@bentoproject/youtube","version":"1.2204221712.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204221712.0"},"gitHead":"fd84f283465064f90218f67c2964f8c0ecc248fe","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2204221712.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-kVVlbh3KxijUbosWQQHDJ1U3u9mf9bAG0YflP2Y1Aqn7YFiY+GPEQm+YB8xDmMo7WYjvwljd0w6Ym9CnrLxGcA==","shasum":"b65eab87fccca73c8175474324d5fd0b0ae04d2a","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2204221712.0.tgz","fileCount":29,"unpackedSize":1572268,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGGir8zynF0ml7sBMhNl7NQpSLSacdNGIKH6qT1L8QvcAiADvV1fw4OR81t9Lxzo/H1zNplMzV0InmBlJfy0gpKpJg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiY7hmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqenQ//V/tReuGoXWgQygmoPpZRcK6ZYIA2kF0TiZvQqUw3R2DnqUsQ\r\nI6K3jA8DYIkFhWDqHmRWGH1ftujxXy/oV2Iy4ms6egLCDEODOCCgDu10htT/\r\n8gnW5+83c++bwLm68mAB/gBA5Hchy4BXPXXmDz+IzoikFzcUsehmU8kjKwBz\r\npf90sAvqFkUrVzbJ+MSgR++9B5YqKPu0an9wACaoPKR+lxyqj+y/yfxm1+8Z\r\nZbeEc15iTqEMCMuM23u33+QUfTP+Y2c4u0C1iR2cmxj3cnRtYHzW+jF+XdES\r\nH76xUwc8EHnQ//n/7yA2rM4HlsmiOUriwkY3Dwn/13LbeIA/lz5rJxpm3WX3\r\n8/G0oZkv2KID51dP4qu8hIonk/pLGfJ4Jj8m2JE/4yv3MMqi8Meb0MEll5nO\r\n6WFYEm7rUqR1119HXzYDtuwEa5e8KXdcb/TQaxDJ4wKIsB7EItY2Squm5UiC\r\nOwTb9GnHTBqmMMYaYDWFuInTI/4LizWBRxM/8fs17OoAKFjxXkNhZzJTAHci\r\nn3YJ68I3rflG2S3Gb00eJu7YreWZwo2yPcLJB++Hopc8G6rdxKljigo69Cj6\r\ngenW49+Fyr8/2vDfvhHSBSsZCT7n+a0susetB5XvjQJOyee58/tPL7wn1wmL\r\nadDOSYKL7+/5fea3zhjwFlrJyVcokgWMjgs=\r\n=C2A8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2204221712.0_1650702437891_0.5437809632174906"},"_hasShrinkwrap":false},"1.2204252045.0":{"name":"@bentoproject/youtube","version":"1.2204252045.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204252045.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"9dcb73514b52c635b732b72b56561ac680ea344e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2204252045.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-Tneh+X51TQl7HI9A5p2wq0PbGtWtCXv9tV4PM0XHQfn0Ea1cJQTs1aLrc1+C2gx6c578D44XuPRINZcElG4hhg==","shasum":"8fd05b094a3082b36e82f6cae85b3619c532031f","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2204252045.0.tgz","fileCount":29,"unpackedSize":1572268,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJD596TkADDjHuLvN13apZ4otv0ZEBKjzPANGPw3YsUQIhAKCzn5aRfqvNQJNeiEUNbKQ8wPQfqpEODIcDcnpdasxS"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ650ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCIg//WQn+PdKDGvIF16/7Cn8Zx1C72afO1tuFVaghPkoUCTshhv50\r\nyNz1SNl1nTX/WnE62mS8VjJXUY1R83hDTBreWyC27LRbdZsbZ/+26bhOjg8W\r\nziuIK7CNvbzaDkImqVt+Ojcg7aUYkp4FM/w5E/vc1Gh/gzUgqR5CroGrhhMJ\r\n/oieBGm5YBeD/Gw3EkIPKzxwBUGqYShulKR4RWqpes0vtkPrPv6ILSP5uT4R\r\n9+ycpjumOQWN/khlpBWIEA6x4IRLPJZlFXBGY+bxvKmqnOIBtTPmgYcAB37W\r\nkbIU0rJBKN4dMVYhAq7CMNwlkxMNxrraZG3FbrTLzsJ1Py1M/lyWBvtDQP9N\r\nbcuYC0drErBWZUhh2Nm3VMVBbO9Y3I8yQPpntUCGwwDQtLW1xFgfeIqTs56h\r\nDWyI3kDTW6qyR8iSDe3DrEBCVNKKjRZAFYC8+plb7NW/xDW9DE6G/KagEgh7\r\nkrpS3bUmtgPAyPOuocZ6lnQ9TKB3+5Yl8tsjLtu173oZtYfaLO5hbxWwVIIb\r\nnAnX0O/iS3SjvKFYwgXnJpToFmj4h9dTZmQvxc15pPM3HmQpD1pamBrEP0JF\r\n6CvUndjWmuc80ifD5igJctzbAdmxhbSCzPmbJcPS5Vx32F+4XRCkQyMKF9lY\r\nRtoI9uRchWIfdSvaoZlwqFFCLcPAxxgEr6E=\r\n=b7NY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2204252045.0_1650962036026_0.07575982303233064"},"_hasShrinkwrap":false},"1.2204272205.0":{"name":"@bentoproject/youtube","version":"1.2204272205.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204272205.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"c2397d28837191a7d145806840ca6ca9a73823d4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2204272205.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-+7sOSc7rlVPAg9hQTZX9MUGgEsINaS9wYezRDiokFO8CkkUf06Zy+V0DbDbbEDpIawSOeOLweGtL1xWrYp6BIw==","shasum":"57e2522a89c0cf1c8f44385baf209213841927c6","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2204272205.0.tgz","fileCount":29,"unpackedSize":1572268,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVg72au4GpJtOiyjpI0QumoRsuzrq6UR1PyAA4vb9kqwIhAMlf7BNHtG3LXt1DMTNY983tb4DrToXbILvkET7/dsff"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJialFYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQEw/7B4yWuFeTP78ohf88lCi5R8zRw4d2lVUIpJ3pBlExdNQ1Rl1+\r\nyjRdnZsztuzeig7Py5D5EjVx/j1bAiXO5JLr75V1W6tWcL4d3LNqgskUZ6OV\r\niESuTLrPpt7tckCDzLReNLIPfomQp6b02fpoGcefphNv3/3jfNKLU1+m0ebg\r\n17lkaT8D/LSdEGks8jM9nPgHgWK+I13KEQpCHco09kt4K8W+SLyWIyypjk6N\r\n30CL3zs+tn1E+Vy+6pUVOmYelOAzdqZS7ag4Lc5YMPxJzQIrZWPgcX1kUX4r\r\n81e20o/qT9Cqzyl0ku5ahbW58M585Hs1MmFNd6v6otlfw7PLwm8umWNn8ua5\r\nLPV8pU1s/J155chA90QY24OsjdWIYXb9eL76NvIwtmz+xoXxbwt/o2iXZFZK\r\nOIJCdCxlX/UfRRMkeyEcdeKl0iaOp9eKzSoJxUVJKNItq5QV1fCjY31iD+Hf\r\n1K4ggSOPLW/9Ix5pn9KlwkdWdeyRVcvP7sALMcbafHlFKhUwXliBjcz3HXne\r\nDcAldAyqW6a0QlYGsEhN/RDINgbBUQBi4GjOM78WsnxmL/WX1IaZ6DLcnUFO\r\nzBZEhfIjvGK/RG/NcoCwo5wcY3uqxLFsDqHCazrtwBtMVY5Cqu0qgkNsoI+M\r\nisuYUGxUmQVrCyqADYFSipb+x41eokBk/Vg=\r\n=AAAt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2204272205.0_1651134808032_0.8076030112838253"},"_hasShrinkwrap":false},"1.2204281949.0":{"name":"@bentoproject/youtube","version":"1.2204281949.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204281949.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"8bd4749759e81fea16cc216637d7a185eea3402e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2204281949.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-Q2RcKLfXWtagGZkCgpH7y8KzhA4wh49OeqIWxNLd6bwwpVV4XiAj9abAYjvNl/0NpiDPbNl5n5Z/vV8iWQHstA==","shasum":"7f4e6695aacc90a281c58af872dcf7d2534ece87","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2204281949.0.tgz","fileCount":29,"unpackedSize":1572268,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7dZjO057muRsux9oRbq0yLFec8E8QjHhh6Lf8u+g3sAIhAO+O/fy3tBhvMZL7mAXISOph79gF5LRAer/HHLJ1rReG"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia6HrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5hhAAjElAWOy35qDgYReM6BpEt+3TwSNHauSHASK9hPc2WP8gdYmu\r\nWTJTRutq7PyNAUOqfmgwWmSD+0p0/YrRoETaXltJKdXkL6MfrF6VS00Egp1/\r\npgfSJEVfgHQZV5ZhwvtUnJOMw3DT2BFCMyeMUImelD4ilC/MaS6T0CRCr7wb\r\nXkn4NMHihPUVxHWOm7eybCo9UaktOSXYqOyHjnSzeAntttRkXDod33Yo/Gmm\r\nV/495gJ/+nBb27Qcq0qElokZ4kYIFz3eaONNDI/R+I2f1mXugdcfZOitIGnU\r\nI7vCAei+yy1Nyr4uhqOOHjDpV/APspER01nGWdZLuB+gUnqhEtd9JeHRzVm9\r\nRLCMw0/yuz+AeI39Ie6yebkIQA2RjYfGK52eJmmF80DGfsK/9ZKsvst2xsAD\r\nYh+C0XfFr/0KNoJDc5b8czDlHydt6ZveXcELryUmXUGK363LVWIBDk7ZLso3\r\n84kmK+6SustyTyEPVGvgtZF49C+5DLwp/Ze53A5w009rzB8V5mCICHeBDrdL\r\nYM68M8DBlOVSlzAZ4DCwB+B04MX/eQi5bp+ml/QHmAfXutleV28b+Du3FHkH\r\n5R7DOG0v5r6NplW1IbXA14wxSnk1TNp1gMJ7pp+OEvyfqdfSUcvpJRMamy8J\r\niE332w3ulX5DgEvCMr0Mc+QLIbgIz9Qy2LM=\r\n=Leh4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2204281949.0_1651220971424_0.3314016539154867"},"_hasShrinkwrap":false},"1.2204292129.0":{"name":"@bentoproject/youtube","version":"1.2204292129.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204292129.0"},"gitHead":"266c274e2aa669399dede55e9fc55b8917069279","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2204292129.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-iuFOj0oH9dhEaiEx8ivFFchKzJPVlQhlqDyXoejkEUwxgQlY/rb2U+t1O+MuLLFdcxgA1ilROmfkonIYe8388w==","shasum":"abbbd3040692a76233fa3cba2a4a7d1d15ab144c","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2204292129.0.tgz","fileCount":29,"unpackedSize":1572268,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdQdZrvWjzhhNZHdnKy+sJkIXm48z3FruYZnt/vA3C6QIgEX2C+6uJ4n7VAgbOkJoDi2290j8TqyGetIww+1NL8LQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJibPL5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/mg/+Kn11OcIijc1UpCLP9JXZaU52ep0/Lb2gg5IcFMYwH5tqafKi\r\nwcUC4yPaHJQ4p1iiFYoDTNq6zdaxykGqbEkkDcDYw42NoRY5/rmuOdnqyFG+\r\nkP5VkgGmJyljOXtlzaIbBq4mcqWWErR2sOPLUGxQVoNkCQiZGs1kfOwJcc9h\r\nqBjSlYKgBhk0+/sATIvjHHcpZFjm0zYzgZHDWnvfxbuxz8sLG2H8TWzKRpK5\r\nK9txzzy+320Bwl6xReso+etgGmFjWpK+uu5vNwAIaDZgj4fkLb1BnmxzuJGb\r\neGpRkjIqNw4FAgsIVn5su0WO1z5KegtX6B+ANYTNNDEfKjQ3KCsazurMoYa0\r\nCZZLri7sGv1HiGQ4/+itXyRdDdAndeeOqCvKNfPJWJjpbgeYN3kHgDAvEI6y\r\nrWOJLjp0eYMl63FfzAcf0B5zCh935UTWcuLHX9TNPvt257/wriVzSQvgBsi/\r\nwBMeaxHji4q+84uxlM/Xv6ku7Guu7NCa99ab6wqlXP7J1OTeFmzzQj8nOzN0\r\nDksuBCDVrF1iPNVvXYRtwWJru56IlNkkHL4QrBxhC27W1hz9+8H7ISyD6Uhc\r\n0eBgCgsHpwBNQNCW0agGZn2oZJIz8P7wu0YTH2BGIBalclD89PsQDBFRg5SR\r\nDh/vmM4k6KzMddyEIESRun2Dd4cvZey2tCs=\r\n=rtKs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2204292129.0_1651307256799_0.2898988882167657"},"_hasShrinkwrap":false},"1.2205031420.0":{"name":"@bentoproject/youtube","version":"1.2205031420.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205031420.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"d3652194dae7f17865db127c7135ec194907b7fb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2205031420.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-J7EVT0ab6dbjIDvW/5NBkXym5qOV1Z2/ICSsF/QDUk1iTLCJSgOxJpuDT3Px0qylSQJvey0iIGM1lCyfB/E4mw==","shasum":"83940368330e4edfacf45fdfc84990d68724717b","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2205031420.0.tgz","fileCount":29,"unpackedSize":1572268,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCq+WKYoozKSIJ7qplKvGTw7jUiHavE20uRj9fIYsWTgIhAJ+1DUuJAztkTk20WhRkQuqB2vWemVwck6YOxEqDi68F"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicjkuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNXxAAhJrl1gf+a6yhJcrnYonFlQhiSE3ykk3DQzU88rigGi2p4vaI\r\nP1saM7S+wpHstLBTGNjUaYzkTh0kNucCQSAUvuEpbFVwm9yG0lwKCclNpvgR\r\n+x+qf89NVCSQqxVOoTffx1KLtN2EtEF/hihvoEBkz3vn3ELyPWH9tBUz5Dkh\r\n5F8Ow3KotTpzuMnC5N47U6WGRbEgaUZIUDerqs/tcD9Ww/SPFpfJMuDtF/Js\r\nAXbBCNkUBfD/u5rUG06gBY6FbCvboRIgPJNH+DGSLOXnfF8pCe95MVow/PBr\r\n8v74kqonSaT/4jMKhmgY6OOF8s85NBwq+8d2sbcHsUOTeBGKE2lrVqjlL/WB\r\nmrP5VpTW3o6tsoy7W2b9+gHM1gzziRVLfsdVg8Iyt5/I+i061ClX95WDGYns\r\nXgTyjD7/IKXAFr5yqz+a3yIOh4apJT2L2CdqStPR/d+Yg3YPZx5mf6cZeAIc\r\nH1KpRILYCVh297LWzFHxRS7mX60/OuqOPrC+sv4L6J+2FNJMXoGychRuFVMw\r\ngSosLeECqreTJhgvyi2YDEkJ43B8p8rp7bqM/1d47Qdheoj9Fp6kwloFAwaj\r\nf72Yucd9F6ws9+8yeu3QhAN5tnVTUB9VTqFcsc2EO5zqBOl0e8oDZ2ClcYNu\r\njktVw3AJtn0lllJnrbqJth5DWXS21u+6PMA=\r\n=xW0h\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2205031420.0_1651652910335_0.7658404985047558"},"_hasShrinkwrap":false},"1.2205041533.0":{"name":"@bentoproject/youtube","version":"1.2205041533.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205041533.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"8c9c66c7b1ace99b28d77b82807f84e9e8cb305b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2205041533.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-C+kwaZKMO/PNrT2gGIHeGVllr8AT5Ot3TsIdG7ywwBvqVmGxi9xwwtWPT3zvBNf49xVTjGVmvtWzH27y12997A==","shasum":"b6097633c85b531cb4a2f03477509fe2853b4d87","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2205041533.0.tgz","fileCount":29,"unpackedSize":1572268,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFCUGyXjOhJxO6hycHhKGDnIhBB6K5IsIdjLtijBtPkoAiB1+s4BVM0jKIY1HTUB0Qxp5HgXAwNZoJorG4SYqrqmKA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic4qHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMcw/5ADw/RT1rcyWOvwvA+ze9ofRQi5J42JbjHTWc0vCKuffJlC9k\r\nTUv7n/waRAjp4WKORpFrSFcbUuYIGVq76guH8Cn4ZrTZEJ6mBCgp7kBk1PFj\r\nZevscj7hoss3g4V7AO6zfvy3HP7SHYB9FpiavFgfg2335EoAj45OxFJlCv1a\r\nuzBOiay/dXqvmeEn0G4OSDiJFtUTo6UEmd6K4CYJg86AxkKvhz6WrtmmJjMC\r\nA9qwxHeqriNeHWLG5zvbWTBXqZOFRTEkMTYpZwU9deXYB5LfU2kVYB1/7HeJ\r\nB5qGBsCJ2i4S7uj83HsIAVNS653tg3P2PZvBdrPF3f/iy3zHJeQg716K7KAB\r\n4piaGNzijlC9N87A++sPBzhrYuIQWnqoTCmX3bJ8tOyzoyNs2YvAHuFNesbw\r\nu+oJj8LJ60+UWgeCTc6IBisB9Niu6M2qzkGafvx1Rm+FBSEiXj0vRaWBeQIP\r\nRbNLUyWeyQW/g5s/Ev5gOHx47E12KshhvYtdVnk1/Ec4AljSPqnV086r/WgM\r\nYXnXAGq5axwAMbnwZzZjRTYKzAmTgIrZiIFB4jrFz3X6q0pEGHxKWF9kz/+q\r\n/RUGwnZsXpyM7gz/GIjN1Jadhjc+/j71elQ/TCjlCIRG4pxvArg9ableDhb/\r\nliLXdrs2tvHhLRnqF5vs3Xwntu1ylQuY1L4=\r\n=Vf1y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2205041533.0_1651739270871_0.47200953934838896"},"_hasShrinkwrap":false},"1.2205051832.0":{"name":"@bentoproject/youtube","version":"1.2205051832.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205051832.0"},"gitHead":"3658b8bf865c7e71c605f93088560c0657af9cb4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2205051832.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-nSC2RcBJveXrG38N4kaE45R0E9puK8v5bwqPCUhTw31UwKWVxOYaUWM9iDg5fhu4/Jc9x5CNgUKxOSYNJ37j+w==","shasum":"6418f44ef7e4c1b7ba1642ea299a53a457c330db","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2205051832.0.tgz","fileCount":29,"unpackedSize":1572268,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhrrj+YlcFgis4+ykAIHbxwCV/MmCi3VzioVQjoED5RQIgYd4iiMDRlvR892vzvLTo3UPAo/AQW5in7fODfjCMRMI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidNwQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoh9A//U4rjgYt/HybhsdIrsaJfXRT2V6d9ISsD/+yRzQ8MMTrvXhci\r\nkg3f7L+/NL23/Uc7yottfEA69nQtRZ3qC3RBfHvNhULpyfkKNpPNh2MzxRDZ\r\nKB1lDUmiqVvl2alUcezHtwmOCrh5iQqsf1ttvr9vYdXGNNLQCt0WGr+7mOTX\r\nu5Ol7U/O+M/9lw+V5tJtgtoVLR+cxeps0qfsNlTS/R5wgXACnIRJ2YyZhXFf\r\n8omGV+yCQnF/BmFaWK0tW9eh5ytqbpjfsM6s4IsBcxo6YtWFX2rzqdEllXpA\r\nmOEmh9AAm32QbD3rSpj/yZSibZHDDqS03/l7lMMbHSU+LCog0GopHDaW4OaQ\r\n0A4yy8nKZowxUj3j7pMJhd3vBrHgh4hzEyG2zhSK4yHjBr72NwasGT8MP3v4\r\nlYfWgQt/MQyTA72liw84/0iV64+ei1PRpymYfRDIPy1VdrhIex2LfQpPWurU\r\nIUDsAKFuBzzCVetoETT6/DyQzQrS1bE0grJo6OKTOuPV/e8l0u7JQMxPfXU3\r\n5rINtKy8exc3gVeJRaJ23rrG7RFs6xvUroLODhhxul+1X4sYKmjK8UqDMFB3\r\nXmcIOrRT2nYw6HcGbqixUvlDfKPnmSIE98qYLVYTVmHMR0Ev0OEwz9cMIDsm\r\nsd0NX+CT6ARUYi2vyB0OHwjHvG63kjTp890=\r\n=VpBQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2205051832.0_1651825680553_0.014677628930586328"},"_hasShrinkwrap":false},"1.2205090810.0":{"name":"@bentoproject/youtube","version":"1.2205090810.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205090810.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"3fe2ae4108e8ce4355c90640458d13cf81af160c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2205090810.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-dOmYT6BIuQjVVHwSi3QGt5fmbRdemzCP5ZIvlwYewopds0tpCSCbAGykw3KmFb1BwHe1nd5lMcE5AZtQ6r1U6Q==","shasum":"f94f0cd898957a9efbff01d0fb8b9f79bac1d8e7","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2205090810.0.tgz","fileCount":29,"unpackedSize":1572268,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAzahQslxi6da+uxCyjpbyv7esHN1UMPj8IHrYq/2hXtAiBx2D5Bd7tEhPo+tT7u9J8rmTqxXwCMO7dNq8i4r3CpEg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieiN5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfhRAAi9bLfWgSTcIYjIw+gkqNTFN35nT1VoGdBwvJf2Xi8F+RGZBZ\r\nZuT8FHWK49Xjc8qdRF6M/79fBYZTe70xi+L3MfD5sXAuIVx1J/ZCIXeIk+Bm\r\ndbcWv13o7bsz05FO01DLs4imOvH1pMnPKhRXIxPljBA7TFzR/JZXuR+1VP+1\r\n+72VxxXR0ip93j4pxJ5kAt1Fp1AgI9pj+0VPHFsR/Hd3n5P3XmWLV8uv5JnP\r\nEDF9pkN2ukdNpCT+p+SN40YfI2agb75Ky4rzaX1FgKBSW9StZX9ANpcsJCuK\r\n9wrtGhxKmMkeVqZp0InfEnlx9Ut4qGENxbOu+QgKPMtkMrQcwSzhf26fQxei\r\nj0Fv0mZw2fbsv0/k6bjwvNnPnUIzrFjnpzMQhF/F4uz3UGpI3sa5oWZdFky/\r\noC/z8EucnXoiaX7Zg6iidbxr5j3xjexeZi3BwTPdya3HKOtka9jiFmp8n6Hr\r\nJbEnAD7LRzRetMUFyYnngN9G7qOUOpw8Oglp1CRoLdy9OnX1B/f3I0+J3y3K\r\nexNCZ82aCtsW4CIBnL3jrdeNBqNzgvCQu1V5OdLv/cUeFGy5VFM8fa3dKrkh\r\n6YuEeAb1nAo6xgTItL2bl1wcFIup36bilH72OqF4CDZpegBZrB8xVAEtpAnc\r\nlV8ZaYMG7DDliBLz8dNDVbrLXVDTUXDcopc=\r\n=ptvS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2205090810.0_1652171640833_0.6927715711610831"},"_hasShrinkwrap":false},"1.2205101904.0":{"name":"@bentoproject/youtube","version":"1.2205101904.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205101904.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"43d879755f765aee2d0eab657533b493a025713f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2205101904.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-ZAGToaI/+8J3FgDhDjoTyjA70q7UoNiDpjq1h1ApiquMA/arhyMoDway985gQA1uwQlSAUuWQj8prCabWfSphQ==","shasum":"26bc5707e4a04f28290e5274ea20e5fcbd35f272","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2205101904.0.tgz","fileCount":29,"unpackedSize":1572270,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBRPyDhiPcPCv9Da1QWtXFGly9Mfdjmmri7YC9CiYLNiAiB2C1CAdUN2shHLSzbA7aEHEwdu4Ai38exY1f1w+9nJ3Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie3UKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZGQ//QNPCDVeTcKAJTrsepnWB8jNgxMKu/hI+RVXaq7K2LoKAV2ke\r\npfPh9Zb4mS+R9JeIcAKj6NsRSXqKSENySNCCiGAvn+9/swb21y2NcZsYuEf9\r\n0neX+q3kv6/RME0QmpuxZ7/GtFeYvc5gFrV/wIsM8z6Z9bXCel3m1o5M9ZOa\r\nRo+y1r75cHmw1+YlThbzJcJUjDwlUNdsa81rgjL+mFtfvAtJXrqAQd9LDHbS\r\nHkXbXZTLpNn4nsqo+q9ccFGeqhJnhagpKrMndd3IfCicejOJCMjNqqoOWUdX\r\njBYKja1fTdguOanJUN1h2S/ZR07IYGgZmTvZ+ck0A63UpkYiJ4+8JLQVuiNL\r\n3jeucCeKRmfVT3muQo79mXD521xzD0a3WKzLnoFf4VsQyznc4Q+a4fniTR/m\r\n/TQeFo2lT9B7TGBI9iD4Mg+WOX+nY9hBfFEvdjzYnv+y8PXDv1DbD93ghw6h\r\nKibl2oSEXb8LrBaCPwbXIszwCWWv7O36SLp7BhaRn7IOee4mCBGuWqnNVDwa\r\nYSTUj1DGdl+pcfJlDzgxIZ+PEc/asWg8GG6FQTSzxji02VR2XCPTe9s2ovNW\r\nyBYBYuAyTJpw9E3pgdtf/luPVNRZUxXBoQ1qt9fPimC6CJYWmuVYTyuP6Boe\r\nO9tIsc5ofmoYoPMVZJ0EQbly9glWbrmZnP0=\r\n=Gck2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2205101904.0_1652258058519_0.2404242401163572"},"_hasShrinkwrap":false},"1.2205120110.0":{"name":"@bentoproject/youtube","version":"1.2205120110.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205120110.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"46f34860b9f501caf0eda81977d1ae3aef4a947c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2205120110.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-pAPHxY59HS/U5Tt5Dus+TEUZk53vrr+ipHeISa1UJYv2br76pRtyaasMWMkTEHqkAw5AA8l6NFHUgQ2+ITsD3g==","shasum":"861b7c0d63414fee0c17dc8a53d9466552c94af7","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2205120110.0.tgz","fileCount":29,"unpackedSize":1572270,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDsisCYJLgfO6JWOdTZWR4WmXuR7ff+TWIZUEJet/qICAiARz77ZjmmiLCEsH5eoD/n08TFF1949ftk6BkquGQTf8g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifMY/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqbA/9HEwDc+CSL2aiObHNAGzY2iLpdEQxGc2Triz5q6J01JXmZOdt\r\n1x/SZOvAtzh8hQH1BhSxRjK7GcKJ22XjWQ40lcF9UVC7+m3zXWtXfQU2ScBh\r\nOK/KcRokVInD6Jq2W3bnWb0aQZK3ryyhuWEZXmU8PezLZ2hurjCsNA2DZyQb\r\nmphKqxhYCEMjJgeMx43VENVnhrOQGK20Z+YHAwvFW6wCDPG1qUUvMXsG1v8l\r\nK5OkMbHIC4LbNZhys/I3h5AuS1SZzUsr6bi4ep8QSY10HOAAr575oiyO2CTr\r\ntbVyfg62cQ3U9YSdgGutbBTuNb90OM+ab0cXcqCNy+6AW0+SBPjA0oCag7F5\r\nfrlYWBzYMFqJDnRPAOB830pqQvReubhWkTeSXc/9k/gxVPP5rke6SuBY2hCD\r\nJP+d8/PXToJQeOyMJE33b2E2WgfBYO1FTrPZ+kC4XPWQBQ4GWp4B1bEKbANT\r\n71d/2kSlxdB/6d5IBHH6VXFj2JqAh6vsiLpiDTJI2zCtUz8n3dnhrYnXm+eQ\r\nayg9LJgu+Wl67H8LkIgjPeHG5sys5IBz4GxlxGA4Vo5NaTb22T5hnaO4JMF6\r\nJOjnpxmrg6R1V66U/2HkZWXNNKkUwPtEQUaJtEXh7om4JJlEL1gjtrB4ZXjT\r\nwO/Od9dat9DOueGgrv7fRwFWjfZi09T08GI=\r\n=rvaV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2205120110.0_1652344383520_0.47144772840869775"},"_hasShrinkwrap":false},"1.2205161914.0":{"name":"@bentoproject/youtube","version":"1.2205161914.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205161914.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"2fb4e151488ba4d856b33f836151d66b45ca457e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2205161914.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-9Ym8YqLTTgqiJUwhK3BVl3TERGrfE1kpfx73CSS9ixqM40UyOOm4IRYFEdbLtj3XcPs59rfvgCEDsB8preJH0A==","shasum":"88f975f219e753453c7e1017b1e120820137e642","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2205161914.0.tgz","fileCount":29,"unpackedSize":1572270,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICfVCJYmiwOZogbHwZoQ2IkgwoFFz7vb+/Dib+eoMjQ4AiB4pbJRu60uGVunYs74TbxgL14FAw7Kza18VcteNwuAGQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig1yrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/zQ//fh1unu+evctTBTHfuc9uIHhb6NDZVZV8IuSn2nTa1cUc2lm6\r\n7Iii5nHrhuLMH5wG2pGAUeNMmDgwPiumpG9LT0+ezX/PkRi20NEA3iRKwX8c\r\nbheyKVXodt6Arm0OdJXUJHVXxcUYrXsWB73pvrd4g6r84VFcwoKY2ML2Vqy+\r\nCIM3HDkTQ6TKKdYK3g2mzWCgEsLsg3RKz6g97ThImVVEZ16DFjRJUwNyR6f2\r\nIgFljnBYXkEIzDzMy+ZyQriniuoJ7mrdmbNkoMX8Y0eebX2s9soiQwp1jxeu\r\nvKJBB5eQO8KZ0jDB+0LErjfgSyVRNgWOj6vG1F+r/5xNjtvIAaY5sTOt4ieq\r\nRkP6GopKgCk/95VZhFOXAwhceIKFxkxSemFLSyqgfpLBWu5fCxM+611BEZLn\r\n5nK4twDpnryymUAmSbLCLSjeczl+OKRxXXGU02wDi/cmx8pS4bGgDeDhNEId\r\nFrD7DcXe7Lqh5Fc3Mfq+8+D4deWIjDN1W1DYU6IVCZ+2dngQ4qzZ1c1Bevhe\r\nknQ97iqv0O7CxInRpgkdKlABXZR22nXGaJN1Am3Z9u4Q8x44HxVHRV2550HM\r\nPUzLxvVKGuBs/JJOyga8vCrC9XzD65DGob4PqBUfM3YyPmfSv0BXi5chmyFA\r\nBzHWoDb5XZIKgX3yqJMdE6e8qlMvFcyyMQA=\r\n=ClC4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2205161914.0_1652776107486_0.8698333627000361"},"_hasShrinkwrap":false},"1.2205181800.0":{"name":"@bentoproject/youtube","version":"1.2205181800.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205181800.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"fb3f61c46e2221f0f2e1dd836127cce386c7bbda","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2205181800.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-boVPkNA0C5Mguk7AJMkrqH219iLiy4AEFR3ijZ1L0nCZ4zm9VmTl3t0hh+gHq+DIVxQ4lwP3e81zxNiDbDxC2g==","shasum":"700a824e393a5346713943e94a52ba29eacb6f8d","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2205181800.0.tgz","fileCount":29,"unpackedSize":1572270,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCS11yi8qiI0APiHWPi0whjB59I1/uwbZCxeiy/nw3G1AIhAOveGoOslJHlITXMG+68vPth/kmLxLsPaqexyIjjqa6P"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihf+8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaVQ/7BZ17uLnBGzHpkvKvUAa620xbuBp8YMug/qIUs0AAaJ14/5ir\r\n/zz5XwUikEou7Fm8z+oeviH+GVKR0DW55xeZ3uppryNNeq5N5CIjeZ174bfQ\r\nP6fPnF+IaqJYu5g07EiWpCmaVpUlCZ2Q5071DhkxWPTXgAAFhQax370Gvm/D\r\n2thngGox0ol6SWiR1oSMbDuIu1L+XxrGijDn27f44KAh51ZtlJoxA6NEGfuZ\r\nkmf559FNO7okXDbcRBLjKxBIp2Nk/xp+IKi8Gn3Th1b6EkazQNPberTlwK/t\r\nvaCh09TEFS/kfEZv3hfOJIgvLKdfFaohyKJnaBEFoa1SxCs2yz0V6DfU7tKk\r\n4/pV8GAvsbjOXxAua9PzTcirl8yzr6kqxpfkdbvtNFi+uBfANPV2dShXDDdn\r\nDQocL8LM074vapRqlDCxn6EfTA20esveMx607zQCAzhhdC8Yz269XOHAfCwG\r\nbHOTr2f596sZi6jOciYnEbc7YEMkikZ57ddK/SM60IGxv2G6dtXFSsUXXaRx\r\nciYRAfY7txryoqI/K0gjBrV2ZCCFhfPfEN2UBCgLFM/LvnN8oAYTXrAxl54W\r\nSs9ddTlkXAfFuoCcLRxe5TXqG8nQgFe1/VWIvXzc5yR9pzG23JKhx6XeNewq\r\nFDSi37oHB7Nf641QlJhYfH0zSErIp7e39O0=\r\n=1O/8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2205181800.0_1652948923871_0.07677813627241337"},"_hasShrinkwrap":false},"1.2205191749.0":{"name":"@bentoproject/youtube","version":"1.2205191749.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205191749.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"83c369066eb9c7dfccb12aea936f29a84bad30fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2205191749.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-UxirJi9JMCP2IBSBtdBVFrQ2+x3YuO1Zn4H11N3pprq88fDdDnuoZ/wqnRlrPd3R1JxgIG/DRsEmuwrH2C2juA==","shasum":"ce913f42252e0af99fd6450bf53a976fc49d4fa6","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2205191749.0.tgz","fileCount":29,"unpackedSize":1572270,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIESruaGE6V0O8wBEWqKDqEd55sarnV0dgsDQJHFMFUHQAiAugOsFT5eaoyJhDkIx5Pm/CwJ4J16uFBOG1o0+9Yoxug=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih1FoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpI7A//cEydgFchLGUhUHA5kY+hjEevZYnozfikEe0UuQPpHVOVceHg\r\nsOP94wg04nBBlzf2fGon9M47l6JtIp07v7JzmV6e9jIRycTEsUNIpW4Wb41u\r\nP+o/TiRIuMn7kmIPubDVK4XBs/LYwevkYlkrB+LUKQ5DcUcuPnflbeE+ZIjW\r\nNoyoQFA1BUhrs6uOzv8ogENsbMQ9BnrFbKBhZc9q9FfHYaN5w0qUKYKCVAbd\r\nO0LtoxjMHtZDZH4pWzHt3EEkwiTUDS0oRPL9MwRwI/Qd5JHKkGLD4qymyS6V\r\nE0L0OXDjjmvEGhbDxTLfrFrUWWtJU440AJArPcVZLdfmk8wttfn4eXvLc2Q0\r\nYl5kbhVzG+sHBJOrNKKJO9lXpPkxXrT/y+EHfTf2zzzbV42NKyVhPO2Iww8D\r\nqqZ/WUzX104Rj7hynFmXP7UyRlYSHZjjHwg8+ElGjMDkgG4YnvABabi142u5\r\nfI1UW+b3VCAZL/aGyBCRa1u56HXMtqfTyt1L4HhJuTdr8hcbS2XVwLA9OzdN\r\nq44eSw36LVV842+8KObe3ei1r7Vr98nBV4FBjhx696vjc8EpaMk4FVML6iWX\r\nc+dpRCW6T+KM0EfV7YAHND6Yq3trqjkhpX9AgjqGKkE3rKQs4IIKIt2/6eUT\r\nEDNwTmKYOI+WAdE/hzeH4U0rTb6Tg/hlgv4=\r\n=I8rk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2205191749.0_1653035368094_0.8317311543009638"},"_hasShrinkwrap":false},"1.2205232225.0":{"name":"@bentoproject/youtube","version":"1.2205232225.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205232225.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"ed0c674bfc87fac47bc1360a13f5d69611a1228f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2205232225.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-v/by/EzuNDVwncjS8oBQM4o2N43ZYkdc3Ao6ERH58JzQmfviPEQvj48vrsguM9PdvjQ27IL6DeYJCcEXasRsYA==","shasum":"dca5dac56fed374aaa5716defcabfd8cd25588cc","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2205232225.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHgDMil/c5799+i7sb2ed5cJl8nXm9YBmLJhY950/jhhAiEA3G5nt3+HDaI3eWFKtc4GtcQMabx7umxOhuem1ZmHGxo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJcgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwCA/9H3mMPu6wZ83dV+NOazdGhjNkCxCoM2pb/AH6pDt2zghaaGG7\r\nPSlmx2X1sYCDu1ScrDrMRc41G07MjD7PdwyXCrz0xTrwITxZ1hEIXofP6GEi\r\niOXG/rZj4zfCxfZfN1z4LxBIOw+1hX5eBwTa6KyfnsWBHfkS+FoP18/NMt1a\r\nnhEZWF9qDJaSnYZcX45tDcsm91HtdC4fdzcdEhcIAt3ySAfS2dw3nYBETMVl\r\n/rbP10yt2NjjnxvbZjsdwc76zvZSjhyTjSfA0q14ABdOs2y3gLJn4QfG3Moa\r\nQXkvGplBCyqIqbOWpEhADW4hw6camCAFOb8iq2R+1sHY6KHsZElis2N9g1wl\r\nEwUU7cWnh6R5CRM1npeG7ovwTJt2x76YoOp8xl75UD2P+dtzAAHlqb7MsRb1\r\nd/TjGP1sDvTxhoJq4E7gLtTEuOpGAfROHkdO68Inx5W6bbEs9mkzZvEtyVjm\r\nqfUxdzXIYivPonQIFeI0jSykRuP8ETHIWb0j5z02K2alSUnDH7EEXMim2Z7A\r\nMH/lh+Hd7mqqWvm/Pxyp7I7g40mdcXXJeuytMF3DsiI/qDt4cxeF10elCCQp\r\nLTkeikr2B9Z8R0TFDPhfdQCXTQFLpScqkQ0PHyYEhoscDoV+L8wOuCLr4IWc\r\nWxNdTc0OOnyQM/WSy2Rz714XwNcTfuB+rU8=\r\n=XGE4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2205232225.0_1653380896698_0.42407813638378844"},"_hasShrinkwrap":false},"1.2205120110.1":{"name":"@bentoproject/youtube","version":"1.2205120110.1","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205120110.1"},"gitHead":"ed0c674bfc87fac47bc1360a13f5d69611a1228f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2205120110.1","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-Z6wfKgqtSoGikVuNZl09HkdnzByk8MCMBEiezD08fk7xCsUt0Z/eP2kJVGZJXbkv3xvIdPpSM9+CSSmKWCPLPQ==","shasum":"91a3141c15f03056351a5ab814eb819d6e0f7c37","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2205120110.1.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC3XEpse0u3ITH4HdBlKy33NoG8/pu6VLu7gFkKcLSzoAiEA96GX3ODk5xP/JcXzDgxZM/zfmlv1FU/rOOdcSK2egD4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijS6nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFbxAAofPe5dKrMlV00MDrQWlgCfbwuixkwTt8w3scQMk+n/TldF62\r\nWuaSyYL5MJfRuNuzPqapxWMjUCZMjB3HeY/9WDmYDCbR9VLA0fsPzN0YWMIl\r\n1LeOsCsBNPLpozy2p6oQ4ZS0QEDYmnxLBBq/m3gl8xwG1HLetHxWqdSmAMv2\r\n5u9TFJvXSd34hsxXml1gqbmGKDM2+5Y5efq1BhDXQhnTQfKeCK150HxbEwCh\r\n3Y+zvc6SSli26FQk6H4vq+ZcPMR9HKpEVBwAoLVy12eEKsdVOOHwBiPiZYmP\r\n1eXZofOPNrSGVnyI3N7LjGnrLXwAmsMH5OaOX01rQajz0QVZ4CJ1HXRwtd0c\r\ns3fQVrtzBy4kSsgTp0RPSzpwKDXy9gYC0empoCDGF31FHQ/ihTswLEpp44nc\r\npvtUflMiyNlI6z5+PV52c0xBgcLE8fXh3j3D8JEDWFUQLa8wcrUS2j8mv2mD\r\nYK6/xN3PmschLUOtZoeHRqwfYoR7LvdVvpNvQPq91TL+inJ2pbGAYLJHgmTP\r\nvi2WmAnkn8Bc0fDoXkmYcP2m37rAt1fzYf9G1yKa9xOqTUlyLgCOo2AwFdDI\r\ngPnezRXmOlasXQStRVpSrrNgHZGeZwVEvzfj65nNzblHxr2dLdJH0EFOl0Zd\r\n1pp2kVisXmAdlWIlwBPxarbQhWmpamkKOL4=\r\n=ta79\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2205120110.1_1653419687564_0.15996530252492303"},"_hasShrinkwrap":false},"1.2205251942.0":{"name":"@bentoproject/youtube","version":"1.2205251942.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205251942.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"e2f9546e2689785f0d9b4ba72e61759323c45bef","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2205251942.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-ce2ZN9NWTWfbha3+G7k6OspkwT4Gzpd/OevUHKUIRO5RwBfBeo1sNMAD3DA0YnwkT23HL8n6qnZW9rvmOOB8fA==","shasum":"84f052df6482c4da741eb83fd598e7ff365bb997","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2205251942.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGDkeoJ2Xa2A9NJmj2jLZnoObjbpcACdvwlzHRaDebfrAiBChyIwipn6eBtu1trkG6N2EqUsmd3SgKfSIY/fUSxGMg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijzojACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/VA//Us+oQJy4ZpZ1y2sn5iUckY0e5IRspgJUrMPKOIg6XiFovVaF\r\nM4vImit9nt0H7Gw5Gyivk+KbEQYoOTJ3zUKIujyCp8Bi054QHH1dZVlEHM7O\r\ncbYgWEog9ZmiRlNZWd0SB6Ia87UnAGQbfTim2r9GhS0szdJsLp+pNI/aFDP7\r\nB6BrgkDYfuC6HPGPZ6hN2dTysE2qDQ5wtg07B2i1IEQ2hmeNd8MMOMhhZDvj\r\nRgQ5PM5FEZlvlwcIiZLC9S4YffnbKZC5UMO16XXwe9b1UESHAXM/Pju0spBZ\r\n5fMLoJ9SCddQC4qjCHhGqomaWfbqWV0I22vzOVrS0tc0dl6VKNa5tVqY4ffn\r\nykfaLZM9cs2qZhXHGze9+1yvcNnu+dC6oaeDnb1XmPDOBPcbackSToOayXAX\r\nEEwzmQIueQnGXikm7LqAj7OCgZj8R3vb3Vq3X7Ai5HDjNpTEnSxmEVuW9Q2y\r\nBMtf6wv5iaFNAmIZNDXNnrdCmwwlq5XvzJQlh/2ZundCoZmHcbmyvPiIRqs/\r\nwmOrdStgM5d+wf7BAC0MimJFacCPcSMLN4z2rvBs9jqwexi8mvoRuvPzVEFY\r\nZf5Wq7PxTERqD/4dOU7svjxNSRVKNqM3dOF9PgID9NeEcSMzkpluAagD7WbQ\r\nJWPO2WOHWyTI1K+Qc6UPFu6gasRI06AJypI=\r\n=oYRE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2205251942.0_1653553699756_0.25807934339345584"},"_hasShrinkwrap":false},"1.2205270638.0":{"name":"@bentoproject/youtube","version":"1.2205270638.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205270638.0"},"gitHead":"11e6020f1ca745e65b5d80408e0beca2a8d38004","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2205270638.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-E2eODvVza1nMNk6vbBZkVLjzu+LAsDTS9bUhCLXSjFrZjhj87SrBeTaylOuvn4g029oDzxek60VwHHSUWT3YeQ==","shasum":"eb7fd3a408f960dac13ba464635cace904b3ea64","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2205270638.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzl9ThXbBo1vH1HtzRdilVOSSOJjr5CJOlTdI5DH5zNwIhAMXymGTXLwq4GRBNaTwrugFUgCkTaSlFxrdwJx/ZfNVb"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJikIvKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoToQ/8CUFXRmByASnJIdmtGiRG6gJB/aFUUug7VBLCQiVNitzVN4fF\r\nmMj14+kwRmilI0ZMNAOd3Qe8EKda+qAg/AkQ/zd77i+hUOV0XeLsamHV4AAW\r\nbm2egp9ydI48imKY5abslptVmPoAx/XVEbZD8596dEb0b6d7Fdf0o7x2dy+k\r\nh67zXNlprLFOyA89CLM4nXbqtB13x1NxxVDHGQ11Dw0r6NcDzgsowQSRqbjP\r\nFMR00GdXQEoO+J1qu6AcltohI5Z5EpbvjOKIeov57jf0+grgvqInlm4PpJTd\r\nMY6Mq2y/OBNFGmdIN+jInrhC25K3KuB5dWz3pj0orErVNXIsSbRiO+0/O5KP\r\noWjNyJIoK/v30QuPed6tUY6v690ecz0p8jZCIqoFSk2FKqCLcNdrufM/+/gw\r\nc1b6V97Np4/ciB9SfU3jNhOjy7hIJeVtaNPv0wmci/no5TfST4H8GsdjytTo\r\njnKGABZ7Ha/QN+9vZhjE4Ekb5Bf4AI+C3IN4ziESXt1WJY/StanKkSdCnVYV\r\nJEJPUBPriudb3C8M1BVZ0eiYWXXXqoWrCknMobtHAOzOIbFqPqxO2V9Wu3rt\r\n+iLzTYPUCI63Nf9Vk3CATIDSoRX/4mDgKRt1R4QntsyzCNFhVjSinhRNMI/L\r\nlz1os5IoFQ+yueEI8ZjFlgFML7Z15LU7K0w=\r\n=0RY9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2205270638.0_1653640138603_0.47715577879026494"},"_hasShrinkwrap":false},"1.2206071918.0":{"name":"@bentoproject/youtube","version":"1.2206071918.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206071918.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"f200c815cb7bd0e1495bd9c338425aed1887a459","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2206071918.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-WgdMtbEH+XZaypMeaHsFs7CCo+HkfQuP97XcPcSoQCKtsFW918yzjDyz/NF4dNoYnRwoUG0mayXHE56dsC8r/Q==","shasum":"ea63c19d04251a5f81a33ad0891d58d9265dcab1","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2206071918.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAhWfsQuqGXal0ojt6XpksdR/Vvip9e18XnRGWIBAf/xAiEArrpxqsTX3rlJmpbNqtlDp+jgQVDDpASPqX/bwmPAA6c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin9F1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr32BAAodtsr2VGC3qdVT4frH7FpjCd0/e4j1oZ5G47hG4z9W26+ZVV\r\n4ucBowngBnVPYkZ/1Zw+1O6Og4mB9dd1thSFVGr7r66jO9ohUc8lzM/jpT4V\r\n3Qu4MtLuRZXWtM8aO/oPIwfN+2asJdiP9MOMvtHQLfmzAnc8dxzbMSC9UUwt\r\n82Vr/xxighXyg/JAhai4VSNcaGrjHP59LIRqzG3aAiHjsfxNTPpnyA36UvZl\r\n2SLNv0PUihKCkROkzM4P844yTnJZ/FTDH4eJlcSYUktcrjXK2zUjzNkWoJ81\r\ny194I4qqpWBdHD67LpvI+CJRpEn1oqsm+o5QWZWJ7qP8qZE6fOOObxKl7eRo\r\nhLVa46+gKZTH0FL9hFeyd0Ncys0hh5kYY6XzGb7tDTNMDqiehayXVEnuVVTA\r\n6i3PO0FglF7r00ow1tky+hoxc6TN0IicP7eF8peEHkEJl/UjK8VfGHkzBSSx\r\nXLFB0dTIJt2TUB04Z70erYAAi/YWCZzcWZkPV24H+FizrMtUlH3wUpT2et/m\r\ntNVus/tY21Zam+PJZ+kgxPM+SdGlSufoNpo2zp7MlXT1V4gvuMeQsJy4FGlv\r\npKOrayDGZDBsF3bq+DTt5D8XXSdWEVHDKyvly0U4uLNlGjJNG2Po43DMJ6M1\r\nZyVMFL3f0s1dJ3oc/K4UDCAn+BOe9Jh4Duo=\r\n=u+cf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2206071918.0_1654641013609_0.15011455649010008"},"_hasShrinkwrap":false},"1.2206072228.0":{"name":"@bentoproject/youtube","version":"1.2206072228.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206072228.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"9cfa89fc95b4eedfeb00b4eec539909f0b0c0f6e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2206072228.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-F/0nkHCT0k+PFQcSki7GUbJnQ+USRiqqU2ee/aw/v7oVWASOUbUJO4DEKiUTt3FyD8DVAr2Fz1kzfLbBJ4hb9A==","shasum":"865d3c6fc09b3f18445c67177ce4d84babb6bd58","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2206072228.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFoiK3bFPkHbeMVxDJzLTggerJe1hkslSggNnPQFl7rgAiEAkRT440O9783EqhXk4zjhqxIH3iSlq6kNzlK6F1AAomo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioF3EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWjA//aNyCtgNVSl8QgRxA9vn2TNYHlQkZB7iz6oTlYT0omto8h9ZG\r\nz5MLo0RT1JCX5xdOz71oqYUI/68VsUjM+nh3cUk8+P/aPOVZx70Leyzsy4Oe\r\n1/8mS2xQETmhohnpbC1X00MGzh4q3IMjoYtYpRy/bCLLmt+dXnFUwsNpI5MK\r\nPOZxYC3zwn1U4n8nzcRTmqRs90L/RKuKmXRxFRxBH4XwlA53+vTqXiuns5Ii\r\niojVQdmwFXIS1LRd0qJfTnlMuk+Wvay7elInZIZDr8p9YTDWeyIHg26yXn7R\r\n4NR1auQcV6XuQeQDaWkgb+NYjVeWWg12wLx3djCZ6Evw4IGKgsTsVNlaI3qv\r\nmI83h65iaG5wFti07lL9LZixzlE3CPVKZk4aT7es52MDjaGaGiatQXcZVlnc\r\nUqPZuP7touIbIHJLs+P+rqAcZJnnCdf0/Wc6Lh6FTi/CnmLIAKmRo7zL305I\r\nALIJ7TuQz0mUNuUlD+zFht8e4GrNvj6sUf4i386WkmI+IyerxT4scH2tSpkw\r\n8D1NIf1Ec6uJ7IUcop/lGSZD7D8fRqPUvouAUCRo/47mXk4EOTl3K3noFXqB\r\nEEkWPGu6Ctzm6BPtthjemDZAZuB1tLORwuPK9qvu74d8jMtpNZ0lgf2zYJQv\r\nybHTUg9JelAh4HwCSqXrTlz0X8JzKTmX7Vc=\r\n=dbwF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2206072228.0_1654676931977_0.9084097924414958"},"_hasShrinkwrap":false},"1.2206082301.0":{"name":"@bentoproject/youtube","version":"1.2206082301.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206082301.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"32e83d3790f33da4840247d996ed3f6b256a796d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2206082301.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-UNVh7uF8K+cD5krcsi1lwHLk+1tDFaoH4xHdkQvr2OAPiv9yy1sb1rBwGBPYHzdEnyBlAC2QbiXHixG0WH71tA==","shasum":"df85dde5ed12704ee808c8a89bb65c7ec3b3a633","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2206082301.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhqvnoeqo+AnE5GyxmVDaL7yG4j/qMx9op6Ufhop4FNAIgSCsiKIpzOhlfCDwR64NhTAeTxHB9Z9G9nkdzwKC1lNY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiobAdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn5hAAkjtzadOPeimAuu78bd/UOJ9I1WWUdKiMbEGePcLtSC99Xdfx\r\nZ7tpkeUKyRx3U7oPpIRdAJO9rXICw9hoImNEcaFeltejbYqiUJX5axLIbpdj\r\njxwATNmyAEls1oDwVqnq2bpQPz6pNPXBnR9ubAfOCneBWWuzIoEymxN0gwVr\r\nThf6DK1wVLBe4u6mqLtd6vcAZ+rP+2ptQaPAjRYql85EhD6O0eKyXZA9+Nn0\r\noZ7DbFfUEUkrbwsI80C2UHOcY6NKI7kT2HxJTjAueWpx4Otrt7ONhnAOae8d\r\nE50Zobh4Rf0qSUVDvNKeNgPc+IiWU0S7Z9WaoI7/Uso2Ou2uxxpr0X5hhWPe\r\n684QpFMWwlMPvTj2Yzs2+/jvs4TMcLnZhQ5y9LC97w44hZg7aReKLkVmkVRd\r\n47MVwOGHjTj0iGrF+PeLzCWEpsyO2puOlIRaSgX75RIuK8Yhv//yGhD9OnnE\r\n72PIiHw8nRSn44IiOY0+aSN0dUZWamGP9n3QUerp8RBCgVyK5QwxCXWkDZgd\r\nH2qG+ysDntHXZ6Jes2/jJgdmlMkbOeswFl05ULquvozfgORyB1/4rRGr8N2A\r\n36swNr/HIv/5kGAMTGkteMeXzzx8RPfcNZ9pGmTRV253i5Kx09RC/uxMSYvJ\r\ndNr/MSsbaqV9Yz/2fezf8TL1kzjYD+mwMA4=\r\n=6/nC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2206082301.0_1654763549432_0.41834395730247254"},"_hasShrinkwrap":false},"1.2205270638.4":{"name":"@bentoproject/youtube","version":"1.2205270638.4","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205270638.4"},"gitHead":"89e43e107472144de698a2c3ebc9e78ef35d58b9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2205270638.4","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-xFZrjkty/KxMSKvDYtZk7rvWjA3QU9vGfFEK9y+h20ShZEc1EnG+SSTBayUepDqWYRbonSGyrvPe3GGUcFnZTw==","shasum":"fd8cbba0bb49ed5959d0be1a303af9483d5518b6","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2205270638.4.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6m0Q4kRkE5QF5lzxqRWQyRBlzceg+kmmr8RB18JrNnAIhAPBtq7zcGI+3tx5MalcLB3+IVBQ8d66VoQdy1YMPksml"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJio7mGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHdw/+NB5uEkFEaMDVKDgRhMat3ZxYd47mmlAI9h76vmZteP9wRX+y\r\nwmWTEZNTZV1JWT317hVaN1xv2FpQMROEz4LeD9cqVxNXl0IjBUxSk31GOX3n\r\n8Fom+5y1JXytko3/W/VIfnYpeaLDxxbmxYlV0RPDaMMEVrrsBN8UVjh4LAcq\r\nzl3gof5zqmISZywYWpIMpEQQNKPe8bwxSwZ3+xhFs5vcXhMK16IH+X5OzfZW\r\navAIZlRmohg+4+iAp9nE1xcfMlWVhHFA9mU6Z8X9kcsZ2Luv4sVIIRAnlnmX\r\nXK/dLmMW/EfrO+qXVkdyLZBIBCsZX44NVKqh+yB3VqVCDlU16foReY/jlsro\r\nwbsdYj0BE1ZEuhzshzXSI3YufMtbnX4M2gjKrCNFHCChqbOPOybDXQds99us\r\nqP3/7vh6Cyg4+A9DEsHXcs5Jg3xtpx03M0xBDMEH5X/2/VAcz0bXPdHzScI0\r\nn1jaocVMOgIH0nhuNmJwUOzs299zoSnsrSQL/oGFQR3M2HRfiQvC5yPyi0c3\r\no7b6PFGP+eyfl6+0vBds/RJi3XfQBA5IfHe56pG04NuwuaOMGHTRbYnzIjz7\r\nf9bn6aqIAku1dM1FACp27sOCleqSAMY+T9Y0HAEnFqLk+3KSdttFVMpJgA/P\r\nyx10TsInVocXf85m57U6NGeIcT9XEIoGxsQ=\r\n=ublo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2205270638.4_1654897030218_0.2714438321738275"},"_hasShrinkwrap":false},"1.2206101637.0":{"name":"@bentoproject/youtube","version":"1.2206101637.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206101637.0"},"gitHead":"89e43e107472144de698a2c3ebc9e78ef35d58b9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2206101637.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-n7nAzpukjv0qLjMc66Me/d8b3n8/ec/kInihkUQZPq5hK/+vw2kx66B1KR1zrrB5UAzt5rV9rxEEIrUuALap+g==","shasum":"801067b819c084a46b242bc38fab96447933af0e","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2206101637.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDU9DNong5lsIf2DIMRhnQytv1TTexFtLklWsgmIwf6GgIgIo+tuE0dX2zjltPeNDe8BkLDUgJgK4LUzTcwL9oJjTc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipFI0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGYQ//ZVrM7lQ1M4BU8FLxyiDIOWEiBhdDIugrNj2strrFjJegf7wv\r\n4daRF3fpiVXNZdg53UwU5tCa+8mSKNmvS0KINLx7Fue4qa6SzHBu+j8Mk4zV\r\nI+X4p25O5oNFOMVxCJd1y0odR2PeF9iQrqMv/FZ4NZQqYpRGSZ4dki4ggkh6\r\nYy89bLLlxhTwPy7UEodwd9jYSIkQwqBPGpd2ULAP+zxo0PjTz+nBWCJcJugk\r\neBvHuRAIgzBf3AJcLqZYXy05EnfnE3SCoo+fu8xaeYXx4952AqQ6vfS4bSY6\r\nH+5SnFroe1xsFR9vMk1sQba8rYGLH1BjVycTAd38QvMG/K8T0bIU1KS2Itoo\r\nHRKOYpAOjO2OjsPvL8xTc1HmwqzOnGNMJAX4je4b/513HXdMf8pwoFwzCdGv\r\nuP/7Ouehbl+qqDUU7P8MHJHVN+Uyyt+LbpQDPlOorZd281X+dCGCRIGM+CNq\r\nVhSAPor99KH+7beIl09FQRKcYGdxZoILqKLZ06CVD9wY9IP2AQOyHELJwCne\r\nr57UPsHVtFDhZrD47fz4Zo0RT4B1fJ51WsEAx4FA32g3Yc65mlBafYKAHN/A\r\nJcXh3pQR58zkrWw3VnDvf6uk0kBYsrV6xUC8YfYe/abZ0kKHZbj50JMbCiHO\r\nyh5KXMS/R/SiWWW+f1CpDjXOjh7PaxHXHBM=\r\n=czBJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2206101637.0_1654936115951_0.8061922936278154"},"_hasShrinkwrap":false},"1.2206131450.0":{"name":"@bentoproject/youtube","version":"1.2206131450.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206131450.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"f8fbcf58e78ea43df73b529ed4a25e79ac758981","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2206131450.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-24jIhiSR6T/RIQqv+oNoXhrzjVcrkBEazq6wXVGNuvKLDWiydSz2lWth9kTffZW9SAS6xMAjKjSCE9+f74hpAg==","shasum":"2fbcc698f669e40c05ed01a426ee7c92b801e93d","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2206131450.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH4WlRA3fhSUQV3zPCUJNWItkuMrcy6t6yrQl8eWYDPpAiAPLd7C6vuiToF5Poa5mvklqxrTGWKufSGgOBcTsx+xAQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqEc3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotpQ/+Mn53WnNuewvzCVFKdyhJWmfi8qou9ClkgGvv2SobET3bX0V6\r\nQ5DHwwfdavwWtrwc7cq78cHd2rxXPOv/Q4LLxgpNXs5V6odz1I0IbEVGjsED\r\nqwIhtum+Cquh6UZgWml/VBv4UU7kpJohejUaxQxuGeLXe8Er0yHYwfXQOzfX\r\nZjKipXFz7NOLHEmoMx6PdRcHQol/9SCQrQrCfByU0dJz+X8F3ahpbHow5XKI\r\n8gUxkRgzJLGiWRJ93a5sJtFY4kRNywSoNlLjtHXjouFMmzywsKDFUhbBnvub\r\nMKgpZWSX8eNpmZ11MB6fHbqNJrxJHnQJ2V3/6+aL4laUf4Gls/z7Ilb+m4ON\r\ny8DcTexjUFSRcYYO/8wa2sPLBvTY1w7yXvFH7oQTIULUkxek2N0fF6RaYrgr\r\nJA4+khkRxP4xtuJBo2N9Nj5wbRl/poYH5UfZTVCOB8rxWzHB0Q/Slym2VpsA\r\n3HhrjIXLBraGLGHWrrDUxl37OpfFQkz62QLK/FB7Qq9Jt/HracaHXADx+aGd\r\nV8Id8gXmWA41ydDqb139MS2aThGFQdZeZdaCKN+FgaAPdA2VCk0D2YRidBnq\r\ntXrid+1kcgTdjkyv8L8HwBrohT5oElSnmhpBfDS9EkWcT2DfhP3TMk/jv7Ao\r\nrJKjFIeqTFXWlmB4jojn6Onjv7eAyVYeZHk=\r\n=XzBX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2206131450.0_1655195447168_0.11783184009975756"},"_hasShrinkwrap":false},"1.2206071918.1":{"name":"@bentoproject/youtube","version":"1.2206071918.1","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206071918.1"},"gitHead":"fb620756f1e66d99fa06cbc467207602e4aeafee","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2206071918.1","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-AJewNd6WpEPzWQBE4WmyUR8D4URObpuaB4CWpgxNaWIvQvRekQaqnpbcOogFPlGS/x8g/syXM7TgVW/h/92HqQ==","shasum":"e6daf841ea2fb126a43627af877e3ebc6c015f51","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2206071918.1.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMWE4H8sGF3YcxnOTcX8p7z/Q25FKD+ZLb8NJWnjMj8AiBnzx4kjuobwnb4WAx44nNbWBPt5i2wM8QhXzQIaFlvBA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqP2ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZKw/+NQaXA88AEi81MMqsGJmG91q8kz1kV1OJy0U5sO3AeNqtzbcj\r\nIGA0ezUq+DnAkDtX7jEEoCRlgcellhsZcK27kjAM5vLS4dgvp3wsDD2YKk77\r\no6mNmT0tdMI+ZU58bRrBgY2gi5oDOL7DdTyzcuAqcen4NLajhfWa6OvRIuiS\r\nUFD06QOkoW50qXkFVFmxhQFH/u7CY01m1oMYmTXFOCq+94WjDDRcwpXRrUuz\r\nJeAtMtXf8UUkeytA6Ex8RL0szrDkbkeaf9klI+E02GNFYCkznPAMVAo6Xqym\r\nAYhOuHOLWpn7ygstA9vtWGog961XQ2JO9w+Yw3XzpVO7r5yi+X5JwCxz4jGH\r\nJmK/H4CRKI3Tc+ZoJigS1zBFiKGukLfxhvg5rgSRAQybsiALdRiK4Qu9r+BU\r\nkCRIh+QMp9TZj+RftGxC/D4RXC3/xDL9AsyF8oIP2Mp1KfXdYuO/3VjW+oUZ\r\n1s8ZY52WbXDzc9VAiWyGyJd/5lPWszSLMSr0jrlTMvhp0Wz732snQfkArDbc\r\nLAWJzYE5Lwuch9wEYJAMNUmDmFne5ZGona9xOPKV9Hytftw6UvkRAMoCa0fK\r\nBq2gVf/E4WeQ3cXWLliEK2vwEPyjjtRWedKaA2ChlZjgUWkQ04GOXh2dmTfQ\r\ns/3lgS1U7zW58wBHuyNNH0PtdIkUjd96Om8=\r\n=GJEA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2206071918.1_1655242136925_0.47358512905279726"},"_hasShrinkwrap":false},"1.2206162023.0":{"name":"@bentoproject/youtube","version":"1.2206162023.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206162023.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"15781b541aae254d04a1cc777016aa40759100cb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2206162023.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-kfN7IEHaIU91QWlffFTbcseVVVr716762Emp9W+jC8XIVfwkq4MKF+W/5pcGaKe6jGH8RiyksKi3rNy75sczng==","shasum":"ac72af95382c90d6420ee8e83dfb194358e6aaa8","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2206162023.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIByKH7qfzNuokG/0r9HAJQ2vUWRR+HkzH1sdOimlf5NnAiEAzeNIBY6/ZUB+MuEY2Y3/EOvDHI019wDn6lHm3RCE9+s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirDuhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtEg//fGTeyEVAHeHtJ7M9bLEZrzfy5uUK++fliQmFOpDvQH8hE6o+\r\nkeOUPHdrt5djimD+2o6Eb0gni3ZvnIA426jXmCVoXTlJGpjWsYiamoOXbOfo\r\nPbKCwI3JDjIaDUOi6p1CkZGJ5w1uJyovY032C3hi+QwR0wvyuJcjOJU/mHvm\r\n/FNjHawGNsX6xE2jY+86BAyK5eDHsbLn0SqgRu/2VbKL7GbB7bLvvoZD5znj\r\nJ7fPLJMfyJChEPCDTOF88p6G7Zk7amI7GNFbbvBKdj286Xwvw1lUm8//0Iy9\r\n5XbQ6UhrIV9xGXsq8t58dT4fTSlnHOwTIG5jBf+Eibl7YcDBL4Et2bOun6Dx\r\nw0h3Nt2ajgC+q8DKw07X5OGMmmhEhjZ1Mol/THYL6DHRpvB556V/Zt4XHI9D\r\nOpX3UGf6J9BWJot5qiz6O+PNlXWRTJp4dsjloNOg2McnV/5utcHKt3fsmXq7\r\nGOc25YmbZdNezMTXYO2LrU4ewo/eGil2r7LztqJvriCW2oj+crV2PPeAI8vI\r\nG/gq0n4BgGGcbmQva8LvTYjo81/RNxgTj+FJYRUsHUTHXTn0OLF4OEm4Q5T7\r\ncLOzw5rvsCTv2VtKdp8Jgv7CdVFt6efyvr4X8BDTGs2RITWTD7MiqqUfoMr8\r\n6ZIdGKH8OPmtYFBp5IIa8JoYn6ETOtU9bbU=\r\n=sRU+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2206162023.0_1655454624894_0.7918385661880165"},"_hasShrinkwrap":false},"1.2206221455.0":{"name":"@bentoproject/youtube","version":"1.2206221455.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206221455.0"},"gitHead":"0f6cdcebd462d3dcf580d8df0a7dfcdc02de9061","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2206221455.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-ljRikXR390jhMiAteX0PVzA9gXnQyZARKwTU8sP0aKcnZlXQAmc/fhnJIdSzJoL5d2Coxxge9SIPpu4Fovr8dg==","shasum":"6ca986b31aae4dca1b2c87cfe11ad4e06a83fec5","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2206221455.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUGabGprUByd0d9mMM1e+3xq+znef4ZwNMSPQNlQKdXQIhAOHJnHNk379HfMc3Nb10/EWMBf8etcZ/T+Ez+qQPsb9X"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitCRLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq07RAAnztDBL+d86VsT7G3Ob7mi6+Fk/gEDH6wPHbl6Np8TxVBPj7f\r\nUZttnZwieBG6qd2mmLx3IYJMhjuSiOY+tDkJe6Vnh+WhUv8wJrD2BO6YV45c\r\n7YSfl0otD0lWS5S3kZn4K3q4QflaZeDMj0Z81B6pbv9vZm6j0zzCh5T6+SIA\r\ndqiqgPePuOPNrIOqSKs5HX72XFTs7zLaoKzH/WCXwBjfwuZ6I/0Zgt2Fk6LL\r\nYPdKb2XmFxYEeknLABe0tor/hFTPk4B5LTHWz/unz69DbXDsNehFLRJCR2a0\r\nUWE/utomnKvpdWRWom31WsC5xEHRDa9SwRjSA72TPZjCdCow8oYpqVG7CQSG\r\n2jiY3yCGC37a+q8kg4BeD1Lx6zrmqMQz7Rj/n6Yg397gwNkFXos7wKljFDKT\r\nsPigzifBbIY/HSIFjkgA5MTwjO1bUx1RleCGyZb1vuT32uPSYAd202/PIJZh\r\nGIJ23hr87rRB5OikBdjXqPaMT9S8qUo0Wh9ELsVQne5h+gWIrAsu97NvD5K0\r\nxWeNbczeMa+99dp4qfY4fHkI+oKRz+ARNPu5vIHHoYpb/HnIRoC83+NeS5En\r\nY52Ciupt3E6YTm5CzavLltiBO/+z5Lp3B0nkXco2NtmDvaS59hgptaK/yAhN\r\n2LiYq2Ha6zTt4VEDMuyCniwVLnEerJ1toSo=\r\n=W1yb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2206221455.0_1655972939211_0.47789921586445794"},"_hasShrinkwrap":false},"1.2206291614.0":{"name":"@bentoproject/youtube","version":"1.2206291614.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206291614.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"34fbeda57c3cc9d01ab3c39cf9618342ec840187","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2206291614.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-WhhbWrSq0iBL/JWbTQs614hVaAo0Bdd/LhLTbCNTLOdIRmopfn1hkxsxqHoQBla5c7jzdrL59brLhWZ3nkuwug==","shasum":"4822277fc635acf1ef806db8a25b6f0a6bc40613","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2206291614.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuxnXDsnu/MumTSGdMNijsKUBRpGNEe/w9DkgU6JA9kgIgTJQ7XvtgfLA4tYXxJQg8Ib/coLuZPaiKaiuD2aWIUeE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivcrSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIww/7BCn1KsPUfmD+QG0Z6ax1WDrCAaHf2HeaulCLWchwU+B/gTlL\r\nR2r9XdXxLXXuJw3E4YLq1MhKJJYNi35Cc5Q2N8FLAt53ZckdmcPCGffUBLDl\r\nzkDNj9oG7Wwf+NZ547Eny68c9xi1YQENxsnDUI1eBKTzbx5GnG4oS2QPTv38\r\nZebg2iHXCRX/2O2dPn82qNd1tdVLN4xX9bUpP7aaTWS1G02sgsLe25iC/k4H\r\nmZhFJIrE+7XWFc4vrO3Rc/Bx/vmNnYIEnai3tmgh/gaFxVYEMIM8ZRcOyxvM\r\ntgNWYqNBAk8ffoBn3Dyu0UnN6SQpfjBKMdKglrpXOZpy+NYBaXMiX0It/w6C\r\n2gKevu+DDuyCHKenl3WIW2fh0kT8zea1qRoWC2aNBp5v5LzLWV7sEZySvxEA\r\nAydGF8SDOnpU+MPesSJpOljTufLUjQKD4awrstiDxHxArTWmd+Gwwq9c15hx\r\nKjYavEg99KQF5RNcrtmFGfi4R85V3/FtXpqFwpprPyc0MYERT0iJHs+SuS7H\r\nnUoCiDTGo5hKsRPNikKNbwDQ53qwqfbt8o2Od58xGih96vxN/I0fWuKCeA7A\r\n7XqO7Whe0Ln+/W7rqo2uvY2MAbVGWRrjFus4Ip9KnYZcYrZEC1Lnh+MqGfZM\r\nGJmbO69FtsDR+ZdOb/ZM8t6gTaQblyMr6EM=\r\n=WyLT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2206291614.0_1656605394110_0.7976238408145448"},"_hasShrinkwrap":false},"1.2207071723.0":{"name":"@bentoproject/youtube","version":"1.2207071723.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207071723.0"},"gitHead":"4ab5ca14023804a1af71c15bba775c5805e2085d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2207071723.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-ilyPWGjfuQFUN/ApDYxLZO+SO1jgLHjFivJ5Kh699YtZ6RCBjp5+JwOLHwEKLYmGJ12Yui0c+/nEB+QesCYydQ==","shasum":"e8544d9d09936107441001d66c258d72025653ce","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2207071723.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5MK0K222HC8GPTf85HxjLmkbWskHb+f3BmUDvKssVEwIgeHER5eTXG9ZaP6dmEGzjsewgQJhaMWAngg3ttn91tuE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix+xXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsSw//djlTuEWWVz7Lou/CjZWNOX8Q5lTshc2SMzb2HlewYHVvJ+8u\r\njIyraog6iamExtK5n8LZBPxnsH2DGlCv33HhBotCU4lzQs//WZ3t7U+jNHTI\r\nwg2GfvcCtpYvr1kHNvoS1fpvcyA4ea74OTz+40biYsIB0Kj2Gardml4Y1nPX\r\nuc2ogSmAR+SvEEKwvv69aDqrSTenSauXA0y8TovzsKhJVZiohG2MVif88XZx\r\nZsz/xOU6BSuPEvGye6TMKBdtPNkDNbYNFR1BB6B8kqYNjT6TMOfd4uVQhpLW\r\nugg1RUAYIzALE2v+0zDGxNUvMw+c70lZev6efR/+bamBselFlboDlVMzq0IQ\r\nwt+vYe3OjcykGcsAF9ZCa75PJ6Vc6Ied1/soTpkFGkuERO6YzNglLo5oOGv+\r\nhHVPmI4LquetZQXQdkST4PVioocPXuhOw3N56nQHuDv0O98ANiBTT3CYHOW1\r\nz9OoHiBDLxC+69/Iu1LF9icccT6PPjw7NDV3r2tLPiG6g8CZ8RYwsTQFgPYA\r\nWqz773eeEw8x/xZGYyLSqVrEuQSl+uN46PPJw3IioNydhEvrIbb3WuAa97FG\r\npEtAroVBMDoKEC25b7caWyRRRVHhAsGmaVhD8ZQJogAFAtOuMJBM5UQtpaU8\r\nl1BrHwp/xJLbNS9ZBfZm4TMERp00rUEDArY=\r\n=pHwc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2207071723.0_1657269334942_0.12590675332307444"},"_hasShrinkwrap":false},"1.2207181727.0":{"name":"@bentoproject/youtube","version":"1.2207181727.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207181727.0"},"gitHead":"78802d83c6c9791cd4400e761bf22f9909218a58","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2207181727.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-OYtSQDZbSdZCvIA7RknLgH7uv9G/aHK9JwOTqTddjBm6dSYb9hqlP6fDQltN1idrzmjdX5QqigaFOGlU4o0CpQ==","shasum":"cb5134d96f9f4109f0c2bd0c9323fac1ea09c743","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2207181727.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVvF7NY0sRkspJw8xp/jgAmsH1PhTNOqHsEmjX9e3V/AIgdQJUfAtBA8dKjR6/yZ1PecvyU4ryUhlo93o3eFpoAj4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1mtBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoltQ/9HGln1vDG4t3/4Jobv2u9pASf6rKWqv2BWb5+A11ShOSBDJ+p\r\npR1GI5ugK7MbsVl2DnANGwaAb4IUWNyzqYVwsIXbCsnEljKogJ867BI+5BMM\r\nLSoHZn37HlBWxk1Rzrw0H4EoIQD6wbxkoLpjd8fEwbGxHI3uzoApfVP72/nf\r\nYw/8mBOFqhuBGaYeDgkBvyNgjC2FL/YrzsBJjvNinoxANXFl/o4XO1hZnGdK\r\nLzpd0r44Zr+j6qF/ocg6Y171JbUsqKK+A+PMB+XxQe5jrLba7SjOytF4pPl0\r\nYnIoHFJLiToQCUFHOCv6sNmP/2N+R328+LC+I2ugbah+W2QGCuzy/NsNpyXN\r\nTOMfnQkQL4wMJsQTHCfILW36NrONpspSeLfc0MVdZkOAl8sfm+lADcEEfm4a\r\nLpy/qA9qGmzoqvomXZ3k4w8On6ojwEdmJT2aU0sCoJIcWvQssqYhvF7bnZOk\r\nL3AkSiQQWPsCWZl2LFVRU8uL3u3Bv+FfuHr0S8iEAeb9WgwFp+K4VIxDcvAm\r\nJFPaja3ARSbZTQbZt+2k1GY9zmzZ9KcKwqqt2Vx54MutXRvn4d7a7Gmps54X\r\nsdah70Ggz0vLjYqFv/UBofFpEJMeCC8qdd51nSoBpZRvdIiWJ410/93hIV1a\r\ngMloGVNBosZBGBYkJae4vQJt8ssfjbkN3E4=\r\n=UaBx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2207181727.0_1658219329547_0.8325243734588292"},"_hasShrinkwrap":false},"1.2207201724.0":{"name":"@bentoproject/youtube","version":"1.2207201724.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207201724.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"62d86212e783d34fd2dfa8bd02ffb0e447c0538b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2207201724.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-wOt2Xyvz14mLOOVTkkvi09aM7ef1tEeiR2D/dupQe717FnVagoGZlZM5KKW6IhQ4XF6/AtsKkIxY0TKpvADlXA==","shasum":"de91b36edac9d69dac9a438a0d729a2cccf14b14","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2207201724.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/NttITQIA7RmQ3Jm75WBLJtf9t0y5ioSylOE+u2CSAAIgTaEk+RbKgOOpCAPeXLSgqvHPizBpnVrdrAycxGDdadU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Q5EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpqcg/9HTBmeyR98ijTOcPrZZaeVJiT7MNNI9TmVMrQBUocZr6FVBLi\r\nvCAMFr5ADlJOST6LrV1dXA0oKEbM39ah8X47Nli1Wo29G4UrjZfwSks+Wn6v\r\nPF/4Inhhk7E/QUdB/FusDKHrt5Nf/Y/kWd3FLKxv36L62CB+0/b6ZPysVjRe\r\n5DulAoQJ4EQtMU6jhw8ave9sUW2/I3Dj8r0752iUl7+0SfId0JAh0gNlQf83\r\niHAw+d8PxQxCUcIprJYckEgtRXDiuitiJbPwmn+DV34OQJdhqVWLOFzGweJg\r\nc3GRXc9/sJQRd46EDWIGBahYku9pdcxeU189IE8KT6XCNUmSzEWMbvINFOgW\r\nuNVJwkt4jwE2NZ0xP115XpVUFz/rjZZ//X8g4pLmVxv5oaPK4mNG+ZpahHaJ\r\n+T9Jlp3wqweGEMYP54x9xCdS0PrEykxhBPGzXY9QynSwn4TOChjc30Ai5VQf\r\nmJOtMEP3z7iMGg2Wq8VqQ//Iy6gcXqBYwMML+Rj/JklKp8EkkMglWoCWnB67\r\npcjvsxHjygdbo3rl4X00Eo7Y9zp9Rtl7B7wnxkwilsepLcUabRcJFCaDd/DD\r\nSRYho/7LQUnCfc1LilekSVT1UaXed/OUa0Z6GOwt7WTxd/yNYKSHZWvH1OJZ\r\n66djOnLbQvZuLH4gkRe4MPq5shCSdhz4RQI=\r\n=qhAb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2207201724.0_1658392132012_0.3076735660069392"},"_hasShrinkwrap":false},"1.2207221643.0":{"name":"@bentoproject/youtube","version":"1.2207221643.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207221643.0"},"gitHead":"83270c82c0130eff7988664c86a7482098f9477e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2207221643.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-5lTIS6Aqg2E0bhqzxqY7vTvoahP5TkpefsdQuEScetrI8Gu5XfZCvXWBY+8h1ZJRTU7ys37op0c+yrpm86Q6OQ==","shasum":"1e6826b540d7697d84031a6652098a8d03b7df52","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2207221643.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAYnEAWlFNkcW3NKKRVu0STjr+cbt9ym6jpHinUyzoNyAiEAuXd6DifavJZKetusamjKyYRsHfiI/DmeQPDOH75fdOg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi27EvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7KQ/8D7Pd/VTiEvmRl9s2H5THBpy/MZgIRoMsOwMrWsLvPe0PmXCK\r\ny7tDWw6dLubTG8kBGbZWBY9WQlwKGcS//EqicbZujchhynJr9QtoC9or03yb\r\nZRtcQsXTOMtzXr5g0iLE8rg+DtkkotaIRRp4uAf401iVtLI+bu5DoLIEqGUb\r\nFaiNYkY+ieeNxlrDQnj8eDQLThn7VXZ8IezZVOl6dfu16knhK7aVQurvj9t0\r\n+hBRIWPV53sKylplut1til8dkSZd1yKXvYv+r5DOdNiLbHqPkiXPn9/6suQz\r\nu5ai/iUpqga6azQOo78adllNenKhA20yjYy9LU6TNpV2oG7tX0WzsRX7Qx2j\r\ne5L2nttHmQzzved3s4sJ3J92KiU3HKrIpuIN77pXmM8PVwZc4ArqlnQxk4Ra\r\n6b6Wo82MO/Xre0oK1DZDdfUcExiFlLLJzEprb63NCa5eoyq7sJHmDdYodBtu\r\nGQR5vWGoH3kIuuTDhzAeC3IkDQmkShWelml+EFDbSSFO3xpJDLP8S2rnJYVf\r\ntHCjhBovqIa8KS8DhwiznDOtsuB+GRWzpMIyl+QnMTr9azh00P0Xa8S1WKcd\r\ngC7FyXjl0Q9B2MAoqpymG6Zy5g9jPIPI7c+C78Lnrdebp9NZANy3VkQCjJ/i\r\nMnl7dSxe303A3/IuFFz0YCjfxOx25r84akQ=\r\n=p0w2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2207221643.0_1658564911650_0.72696198140463"},"_hasShrinkwrap":false},"1.2207261725.0":{"name":"@bentoproject/youtube","version":"1.2207261725.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207261725.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"b73520d61dc1a279ec10d2a27f58891e2e2d5d93","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2207261725.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-ot+4sqBODWROLan4dv9woLi/IXWGmUz25q/SR4rjlnlyLALRUcirrUvme75wtWybCXq2vKV/14nWb8rdArLMQg==","shasum":"d27ac3035d141230c8b5fc191923ac6406fdc663","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2207261725.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC00VwPACVYLXmJDuG/eWdSsUsTUmpxpg5HUEWbcQUkNAIgKEzGKkNkSFyO02kltxm1iyi9+6JUiAHEYHP4uHPrbv8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4PdJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoivg//fAWRS/Bmew+5CB+7zZ6UDKAgVyxQFayvoZ2t3D4M/AX2ZYMM\r\ngssgpWqt3rZlmixQYHvWUXHM8vtgD5UFd0OA/mtJ9M9hHiQ96HDi9G0cKSX1\r\nRNh9PIoWmrXGsPsAPl9GhAg48VHiGGHrZAtK4weHs5w2ZDCdPIqQdxLre749\r\nq7yZz4BrR+cvkKc8FRPvgt4BZY3/iW20MJQg8LXf/Q7Z7q0+vc8z79rYUV9p\r\n2hFxFscCoaR2lObnDt6i6JVtcMxXCT30Mjra5GNWNWMlTtM7T7/QdEOmF7wN\r\nW/gYrlB0INJzwk7kHisQOJALEWQxS1Ek9ujQqDMjwuFd4KasKENRBD+lsZP/\r\nvsfYNTppfHZQmy/jfs3MIGG3j30Mjh1k7nwf0kxJ2bpsHdLRZoc18miM5ae5\r\nicAT2JW3ZgW1nnBHtgH0nGiah7NfJy+cE3P9viMVVjB0vyo4zBR/kLWaybGT\r\nsI8RfYrmDvs03L5SYVB8RLPZ0o5nqsZpOMZzlXybKHYAJe0XA8zvwDIB/J1G\r\nGjQp3pzc9rKV0X7OcCE/Ar/c5l/aBaycUQP2tGH5BnYUBCzTyGsYDeTpCZ5F\r\nuFlQe3D+4/CItRYkH5EuWUCWDHL0qGB3Mu0ZLXePq9J9pF+MEQotymAAmU+G\r\nph+32sts4IVFGacFg5tZAzjw+CJNel1Y8Tk=\r\n=0mal\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2207261725.0_1658910537327_0.6824330693580476"},"_hasShrinkwrap":false},"1.2207281718.0":{"name":"@bentoproject/youtube","version":"1.2207281718.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207281718.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"5e3f3eee6148e0ebb57aabc48ef987e9b5528611","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2207281718.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-KiOdbnK/iGJ2DNScdcDgOE5HZpUfKARf8BkP3zC01pLDWPJvd9Nl3hdI/twNzIeybShyZHZE6gLg4sfnQGWpjg==","shasum":"87b8fc9b7ee188e954229da8cc1868006980eb62","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2207281718.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHPg2mbQyaeuTGmlNs+ZS5k5HizNKcqfnk8uAZaG/iurAiEAwlRPuX1j2JCSfsHtowrzOkCY8mrmP3+Tz55UPUJLfao="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi45qzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRoRAAlHHH3AgGBGWUaOaUq+DBbXxbHm8rzZKwryd8fvpi25mcJUC9\r\nJnUs+43H4ZNA73HrPxSWgfmMrnwpoGAQBqORyyr4E8HhAdHxjhptIw3Db+i7\r\nKsLHP150nE8+C3weR6dW+s+SyGgAoMo7x8l4Aa1ZtGQiQMBYBikOizIK8STp\r\nhhMB+7aYUwS/9Q9pkcNSQ4Oi8xpCjJbJwQPEDRhVtHK0ndvtOvwOrQBEOIRY\r\nvBw4UqGrGUdvQdLc68/7WzllszRJAA9QmH3VbGCuQlKg35wXD55oYqI+byVc\r\n29qxufyxNWZwJnF++hYuqZvkZd+5qFebeMzHKKVhZ5Vq1v18EXkMso1aGZA2\r\n9t4jhB6UXtTvOUzn4fZutbtbl6NdjpfDh/sQTk229+m4InDCQtDMVzv006Qj\r\nOuH3iPcmnsZbbUKQugz3HRq56Llm5BLqDpfgjD6W7R3Sbp4RvFPspHoVWcst\r\noZzJ5bAwqSBDneiuGGqyJ3kGNYXAHZWkBaHzT0/tnbVOSYQkNIt66Roi9qcc\r\nY9Zm/snNO6BOioI5klbm9oFNRykni12aE3h5QO9vElx4O7tO7P8mHloOzfrq\r\nM7dWtgDV1jjuP/vb+k+PnpALQNDDrNIbx593j+GVA5g4HyZQbiPmoYGSCDPe\r\nu1S10eVy+w61zSft/vJJn+5ANvb8AEVOLsQ=\r\n=BljY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2207281718.0_1659083442910_0.7000586219091571"},"_hasShrinkwrap":false},"1.2208021808.0":{"name":"@bentoproject/youtube","version":"1.2208021808.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208021808.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"b82b832cae23ff854449af280f1b02f4dfeb99f4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2208021808.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-sOxEeExUrOXGso/r9lZ2389gaASpnrBhOVgVoh4CfeN/7EvKBvaOEZZimzYKruRA0YBAcfuGPigLq2NNGmSibA==","shasum":"e7b759b7a452dc69cb4e0e60a10efd9bb6c0adf8","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2208021808.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7+4je9XPOKyqpek/fBEcJMPR9nDJpr/THfb2mHN7C+gIhAOCDxk87Xym/+Wd90KV7BQFhPe/or7TtwrS3BtzbYfbR"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6jHaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIqhAAkTS9WiR5v53FYKFQnYs1ozosZ8/JHhlUnxeRR5Z6vic7EMQ4\r\n86gZDd8agZb7YZVu7EpLtFyPY//B0Ek61xPBskC+z3QuZETxqlbnFjgFI6b0\r\nnL5zGXOv2MdmuQewpmB4UcLH+FaMbwpyzk69MB7HV79CbmGtnMu8WmJztOip\r\nHSnJ0pjuWEt06+qPSREcCxbhRrn21z519pCYtoof0mN9nbq0qsxCgBt1gE6Q\r\nZhxeArEPgm8pa3+N2Oi1r129VrM1ohv+LYKUhr+lSKHXjATQbfGVos7rR4dE\r\nsftbpaa+t3RYq7sJcRuZ82uu636+spV/zpmPHRnG+9g9vP+pYLFLjaI2W0JM\r\ntdPWpoklmSV7rHmylF1MEQf4REr7zQQsVeey8tdqhZYG7xMEtvE/wSqnNQFe\r\nWR/fj0UgCTm4Mryp8xktZ5AKrpUSZIkUr+U81XWWVfbcC7XurcEPpQk/jLm+\r\nK/9G+WZM3ZQAdgKc6RXyqcjMuGToQMtt94BKaphClBj+cf45YBGesvVw1lrY\r\nPT0/+gAgu6uE+vCRlH3YMkrh8PQP6yJru5D/Iy87AdPWWAIE3DpCqr9NnK4N\r\nFTqN1aCX/BXZsZ7n3S+wlxC6rfMONJu+vd0Kaf/RPHSY3UfSUaLyaHptbex2\r\nxxPCwMiuGN+ynAWV2itI3TlSQWnwXYqYjrs=\r\n=ZGNf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2208021808.0_1659515354143_0.7243356983757916"},"_hasShrinkwrap":false},"1.2208042017.0":{"name":"@bentoproject/youtube","version":"1.2208042017.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208042017.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"598aa15d3922507a106666aca29a90334c7b2c05","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2208042017.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-elfyEHHQsilCVNAhBjEIgnYlYzHZ6MhMQUJUVyL0mJrArFEeZ6Isa+aZNnGNaswx++FDaRqvlPleN99quAt04Q==","shasum":"3ec2b3f21d4925574af826aaef71cebca295d054","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2208042017.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmw0IVeUmpuFR94bh3/crd1topjq7UOClflBzfC6/LXgIhALx5IrSOe0tA/wrv2lnlltk3skg4l/kTMkrgIMhgUTKf"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7NVAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPog//UXDqa4bfB7ysXKGj+CfAkDHIIXDwhVo6GAmUw7cDfx3xL0NL\r\nVf2zRynM0KZ6dejrwV6OiXZziAQZ8meTqvQ+Mfs1ol8wiM9zpWxbUbu210Cd\r\n5s8fqrejnGOR/8H2d06YXOPdZwOH6fdQDyV+/IkOufZSQpY4kEtzUe3Is4Nc\r\naUp4IpbJDVLDQZu2liVoWUYlkImRAENNYfsp2kVWINBkMF/RFPKkqkAroLp5\r\nmjhRsqd2t8HVLmZY9Pu8VyXGCcg+s3ywtJGo4bGPBc7FEiEjlFbuNUYSyzud\r\nZWhJ7JFqEpYnBe7wk/YOE3NhJvQBjBfD85ATSoXedQbGBYaYSHDMK9Gpb6nb\r\n0pnP/WHj57w1nEXzajdNjoNqKf7/iXjPHEvD0xZr3zeG5NB3hlBiToVw/ZXV\r\nFakge6fLqjwBquD2RKum3cDupcmcKIh2vbZst+vz7UEfQpTqu8XOvk0cu7mB\r\nzcBUYYLuMw/ZaHC4HBIOfHwXVfvZvMv2CcOEpUeu9e7Em0wkBXJYT5zN6ECq\r\n2V7SU8ak7hr0eTJIbnzMeaFt/Dko180xoX0FBIAv463HUq8Qmqs3U4W6RTed\r\nRxaHsGYli8zmlqPl6TfCnzr1ZmGiozJYgpA5qwgJxVLikxThwOIgyxIZlZvg\r\nui9JyiH6BZT9O5f/qAYKM2nQBTWn9c/I+vU=\r\n=Q8Y8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2208042017.0_1659688256166_0.6185397500466001"},"_hasShrinkwrap":false},"1.2208051912.0":{"name":"@bentoproject/youtube","version":"1.2208051912.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208051912.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"5f50e49dee3435f3a242126437de7cc8263c2ea8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2208051912.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-5AY9rseJUTiUNL+VSaTimxMPTwRya+Qv8hla2Wj+45x3L/2QDcW4Dn6xih70gx39+lI/oQygeDRsjcBV5sslQw==","shasum":"9868288d6d1126e0efc76556637e4bddfe26e803","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2208051912.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFrACGdAH3x5AB+8ob0rAlE8NlSe/3fQND9ZweJtctghAiEAlFwyzWYt4B82V3TcPrP1NqPXvU/rqrBK719AVSAqTx4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7iaMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBlg/7BAAe9RXvI3V2RaG5C+HWFG2zuQGz9B91CpBujAoVLWFTLkRa\r\n0AceDyI+Ws5pEt/9jIH+D/kq35G6HRMGn0woxES6o5nszkvGDGCQHoTbcofT\r\n9ytIiAG+V2Hs3ItdDnSrXnB1FRD46jaqlUgrqPTx7WbmURgn+sDgKhBKCYse\r\n/yN1xD01/sCVVaZLnQtbsY0ypkcEVAm3Wm73C/WFh/LQBF/o2dPTFLK1QG53\r\n+8LKBCohwXIoyqlcauzUZExtzp/Q6r8Dx6V5zSWxF56r3JJ6RRrKhf7LQMne\r\nqxh8aJ4zwPkA5nP3PIK8/cNfKT8AK+ivac+2+ipGAiAVYKf8NUohGMYg/ihW\r\nlPlIwNoDTyPUR2jtv3JeIHeNAkunrs7RTgwZwbu4I0vnzYTMj4JeZu5xRI2s\r\njSnV69UglaVKqStHHx7VE3hV5uKV4utERqlQlfd5j3mexza2HztO3EOEo057\r\n9Hz1pvNj6Obbp6ZrFh8FCdeUxtZhgq4gULdZUTPNSFpPgVGM70a637KLKYyS\r\nTrapNL6QZpgWZSleP65vHd1Asnr1RwLpGdzzvaEUieRGF0xUAFug8BoLLqj1\r\numcJeYnpiu7tDLHq0O0x5v4x2XGkml3GwKsgjITWSpO3XNIg7v8JgaorDzyh\r\nX0NkykrSxONE8zwefGuQm7swVtGDc6f9RXA=\r\n=psIY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2208051912.0_1659774604566_0.8207009926065147"},"_hasShrinkwrap":false},"1.2208081650.0":{"name":"@bentoproject/youtube","version":"1.2208081650.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208081650.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"beb9a33429ef933995a664a1aa534cf7ac0984f5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2208081650.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-zff717O5CM2O5vQKiYLpvupgF6A8ArIA9Y6knE/9elRs8hPFgqNTaDIcHruiom54F6oKPRqQZsR3FMdWcrYfuQ==","shasum":"c4a2b12ffcaefe9c335a3de91fba63d49f315594","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2208081650.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3eqWgXpO1uE7qapFmQ5D+Z+3FzkrbNFYMzN/aCZTpTgIgJFVfecwM0flXLZTSdN8kzwCoC6aITsDB36snX2M9w8Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8hsNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrItRAAnTqvoo5Xpdw0pHQmlyt/PUmgbA7IjyYpWdOvfDPpB+81aB8v\r\n9u+qyJYy+fFwPs8/YpFiDakg3WpyXAB04eAsoYNvVvdtjhnIug7I2IaTNztm\r\nKe7UWg/rGcAEogtxKsJuIoBc6MbtItinGGtMuYaBTK5dFTgdMqqfc+iezgaS\r\nGS6Z6e5GXm/q8dPUIo8REchXpfSHRUXUwWdz0++Hktfekx5rrR7QlI9QibMl\r\n0ieb0bkMbl6p3vmpXytKTwErjNVv7VeAHW/xHhuOuH0pab86Oo93yJqVT9eF\r\n0iwBQr2M/QY9ESWI9NjxGj0CSWzn07QGqplGIzzvB83Bk5fteWmM+CPE4j+T\r\nV/jJ1X2a1UYP5Gjnb/HvxNMZNNldUMmVvGKwEGgKgjbe/DTYQ7uxbR+GlOLD\r\nxwfyuaj4JvxCgpTh3v4Z4h8bnw/kCGe0MSR9QU6VlOFvUB/mA4EnfPQ/nWcV\r\n/ft9ES7b16Fo2Fj31kvppwZhzBJhgb2ZiBIgQS7L9HyjQG2nbGim6EwGyQa9\r\nJnR4whabHVQcsKOd1Mqv4QL9rRFYdEhiHJhOhCmZYa6psr7el79GISMAdcq1\r\nijUguCu2VWJdUP0lLm8GgTfR3cFzb0GQuTLrNAkJkl+F+oXeQnztxkaN0Okw\r\njonzkTVGscCQ+nI6A8GDS7tbQn2EgabNYIk=\r\n=kh4S\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2208081650.0_1660033805313_0.9795533509585976"},"_hasShrinkwrap":false},"1.2208092047.0":{"name":"@bentoproject/youtube","version":"1.2208092047.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208092047.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"5147b5f8b54805bbea52be75a64d125a06f88aea","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2208092047.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-kfU5X6bkFLpxBz9USPvWo7n45goDrDjYCOkAIsU8Rui9fkiV4Q5Z7q73EQurIP8lxnuM+UP5Zu/TiMDu2899fw==","shasum":"562fe2a31d92078d0dd1cb6c7573ea237926e826","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2208092047.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3YnbCQ3Hs5KSsMv+atOjb1lqPCFwXnMP9GsgiOBm7pAIgCUfbYePDcNx4o1Zj359+MXQmL9YsYMIl6IYFSirmzHQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi82yOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCRg/+KDNEPbVic7Ht25ijHPVPmRiJdvHiJrXwGaV44dJpQbTz9TR2\r\nM+357jeiTHxB7UlmBfYc0LvM5oOghbW5s5iJv5WaHAqxWYHC2bS6wj0JloT/\r\n+BQyprJ9e6naaq/kixqy7g2wlcHuA/tp/9LpwfChFlimHh5mi2hmcv5csFVe\r\nYaWHIXguvm5kdq5Urgbnbh5oE8B9FiyWrQjUjJcyLDQKDrJyNe86rEBWrRLb\r\nxNNMN/BaFikWgOiFS+O3RhyfXdkgqMrolFUN1YkkFQMNyFv4IgfQzuBRy+KZ\r\nrvdVjahJ2knuiTPDazwDyFpKl1Kt7kCCmmwQ8h7Gx/Kx0Xkk0ByaadnuF79S\r\nKSSGJ1s+8Dme0X76ZiGmvxQNRg20Qc0VoPnYpg7siCl6ddl0YhWtpKrw3koN\r\nrTtEdU+GzAbNb2M23DHb6d5rD8wEWtAiaPhGkD4qxJzRjFSSIOb9FJLcGjvl\r\nwbLQ0f7gmD+KBxAMXyv2/zg+ohbUrmDtH+kr9zKYf2lpOa6/zbZ/3AqC0M+S\r\noqu1jee5Ouow42MsIJkvHOfFN5xEKekg/c1VbKtgBi26sLTtFgxZrTKwtmKy\r\n+tJ6wqKmbUBZQYVGiGAcwcRguDD/hC/y0JV8e2BgApQ/RDdqKbotVk+xArkk\r\nnNTPlvtSYNu3bdE8HlEONuvUe72xhe2c4Fc=\r\n=jMvw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2208092047.0_1660120206435_0.95331559853655"},"_hasShrinkwrap":false},"1.2207281718.1":{"name":"@bentoproject/youtube","version":"1.2207281718.1","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207281718.1"},"gitHead":"b2cc07c9f0ea3633ed63866b9243ad0bc964dfe1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2207281718.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-ns2di2zzcyWxim2NgCCU96+76vzjtghoqYC5mt3L3BZlhSaE6jrfWLMgkXfjLA+zUc6kEAkN8uE35Z/pJ0vvRg==","shasum":"ebe5348bc33990acb427ec3d7cae7a53bb552314","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2207281718.1.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+qTzoAN/S2yr2XbMQlPvJ4+WQTrlr+TUGn1y/Fg278gIgbCvXmko14jqkmmA5kHxBg0C7nK4ktUMHZdbgPay368U="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8+RyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrR+A/+LqCqrdpyhUg3L3rpjVztQxJGGdNFF/sbz+r2CsLHCug3Xlct\r\ndesvKYFCTmzkstY6hTkn8F1bQ5VcQQHagbgj4KnTEAQ0+QKk1FTLfpvTQ8sK\r\nnpswcVT6+MqVhGfiOIF4eas6q20sAe72xNe+BdMf37d7zIEbi6y7CGimcAAX\r\npt22UQBehkYCLapw+y7gm42kr2KaBbNF8j0kKx+lxiU8lRHhCGbEjip1zPeN\r\ntMNl3jE+ieU7YHGFurZY6tkVbaWXqMSlJwrylGqjpP9mG0iGav4oj4/QCye+\r\n2ziun1SQfvXPevFe1m3Acq+JSsMmv+yshDaO3LLpAzDs1Y6Ay5iWAEYG/CR6\r\n/2nAJkY/68Vw8Rcg7VJ5S7sxRIYXrOyJVyPYc7bFCr6s9YlqU4qWMY7v7MpM\r\n7Zx+0I2EVVoB96kOptAOhhq8/lzo7ovN2v1zmuNUOlRsW6Tb7ZY+J/CYwr9p\r\nYMpi7OuIZuDifRoyPZYgYNCkX8h06IJJXs3SEnFvLS6PKF7ZpO4NACVmjY/k\r\nlItEyc6oWp9pAl+G2RYMvFetMQFoaH9/T26vNC8Pslcy91qsrqCpIrx42nlG\r\nXdNBYdrPhxlqLQyREzv1Gr5bceUvQNH4nLjsrLPy7KArl4tyd/cdRyTS9U8Y\r\nqteXjQfCvDl2j5b10/wUt/Oq1s9rdwQu6Jw=\r\n=hiqo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2207281718.1_1660150897812_0.1930805036575074"},"_hasShrinkwrap":false},"1.2207281718.2":{"name":"@bentoproject/youtube","version":"1.2207281718.2","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207281718.2"},"gitHead":"b2cc07c9f0ea3633ed63866b9243ad0bc964dfe1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2207281718.2","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-/FmCDc0BQHCCyZZnsiD3aOn7UIhngU5QUT5idAXCX3PtY/e7V3j33jHOdZ2rZpd9ySlgjEKSvN1WKaQpvfK7vw==","shasum":"4b620e26c7c16432c4a271bf0b8a1f16c15a6d1a","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2207281718.2.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID6mdIrgWaVdIo1/MWYXmGi0x8KtLNwPUdFBWp0/+5PdAiEA10Moj1XK5spVuqeHs1tXDK2hx+OKmybQQKaeDMX5+a0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8/Z9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmphxw//Rrdkltbb5torRiDE92ipLDGmMRQ+uKqBmZkmYNCscI4Nn28G\r\nGJs+Bcc6JMwsIP6Lp1J5mvDKK2P3kJdjf2Gfq9OtsMev/JXXIMiBVOTyohUd\r\nB9MxqPbJFn4a4BgL1alwU+cjU830/zaPRGqmXNfoKzs5BSoEkym0sWAj8NcD\r\nvZjXvnbDhkHKdpzMWgyI6Wj0NXbXlWqo4hjqqqkq2aOeLqKQI8lb3TepFUje\r\nNWITcNpV3F25SMeWrxJexpvjFV35M5wS5WdorhtYX/n02m3gDTJzup1P3AQa\r\nQKOhO74Wdm770BFFCRdxZOkezP0IUGcoFlAhbJPMdLqFM5qT/flLwSQUir4I\r\n6+RXNc6yPheDmzYHPr1Sx4722TpeEwJc5Z/n/atdXJJGBAE/BlsSKRMe/hwM\r\nE1W3xW/lkdvq1R09XsghHoW2rI+SujY5OaBHnFj29+25BQQ02Umkpk3WcwgA\r\n9xyStXora7J4GzeKS0bS2iCWn8Xjzr2hUlMTrJuhWjFsT6zPQqPYYa37+Zj6\r\n8PH5is0NuZdeF47xs6sKn9mBn/193PS097SIl8PASwG01y9DhcJIE5ObpEoZ\r\nUwpyUDcIBW2Cjy4vKfueTtfoYsLXbX4ttlZozStyLSEze8TNUjUM3YA7BXlc\r\n1C5X8ZZh872k4Trri2F2HRmu9EAI2bxhuNE=\r\n=w/SC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2207281718.2_1660155516969_0.19554865174043567"},"_hasShrinkwrap":false},"1.2208112015.0":{"name":"@bentoproject/youtube","version":"1.2208112015.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208112015.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"83d345ea27d61c78ced5f68848c4f342e947fab2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2208112015.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-FBzaJGGxq70Zdx6jaVmxzs5kyAQIHP1TTABaIs/gkzYCL+TFCOUnUzpUqlUs/kOk8q9n2VXxG9F9Awq2M7v2DQ==","shasum":"61898eed399fba47fc01d3f1248ff2f85169c544","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2208112015.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCx4wlJ1491NNBz7XBAfjVVs6NKjh+gZnJ7F/TxhHFpaAIgUvEpn9rShiNWYUYJBu2C6FXpYw4KTtitbBlWen9PcSo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9g+VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLiw/9GTSkMgo5uWz/j4ndC0meCI2Mj6UvePWjf22RPiiq8BFLMiNp\r\ne524G0rpjab9mHONYhtF/WXobECa28tMiJ2V+/Srkpp3zggimFkUCyH94sYO\r\nLgDBzeT/Lzbkkc5qvnkUVbudb9JGEdU82Z2OenRrwCANCiZAuBZQ+9OonzTz\r\nM/ztmP6mWmXq7nG3ctffxiL1tQgMorAcWx0lCEikU0WTx8s8Zg4RToBzeZpq\r\n998G6oxgHQXH3ayaGXe1+GssSUlhvt+/HQxRFv0spfTNaDSpgKLfxov34Hwi\r\n7PRz7qABu1wi13dbVfh0KMdb7C5+NDdLQUiXl5War/bw74E77anV6T4NHkas\r\n6AE42pDeiNndIDm17G/FYRqhySDjwrSqCoHZOe9MxQmL+jbFW9JxHwvgTb97\r\nNJj9uCPXaSWWNSfN/qt1T3GmsjM4NsHUSMoG/riVXFtmLN6XqlD4ivgZi9LX\r\nLhJQoZMF0MYrVCnc+Hb+Tm6Zmw/SrNjsiZp6Vqy093/zEezN5NwA6hysYNla\r\nICPCeZ5BeKJrxeiHv5ae8uEZTJ3NoWtkLtbNLhvn4HhDWIgNa+TT63iLud3R\r\nRUmbtVu3hdqncB+j+Oa48d95EeOzmE6hlqqIXVyzI9gLu55e/Wjr8kZP7KdY\r\n/HXbeaBtvMtUCHQqpZlsNPsDef7Tg670Ymo=\r\n=jbx4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2208112015.0_1660293013593_0.22090490266193008"},"_hasShrinkwrap":false},"1.2208121708.0":{"name":"@bentoproject/youtube","version":"1.2208121708.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208121708.0"},"gitHead":"c9c6de085436b10c2fcf8e6c10541d6d2658af93","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2208121708.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-PtJ+qlOnXF//Yi43zxN3HwIngLHzuOLSoeIBjjinAuoq/yzC0IsI6vIMMNSeQu7TgkRVmT7riNjU8AwMpalU8A==","shasum":"537c2e19dfb10f65463ef759ba4c4e979dc197e6","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2208121708.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCM11rYpk0Yu0giqSs73peIV6dVh73AgT1rOq0bE054HAIhAOPKzfMRPwyv2FfMxEKDOck+be9ZYzYdgr4xwsxw32Md"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi92C8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoG4A//S4dmCsjEDaojkNgQ2L6pG1wLflAt6J+Ks+E9deNtVgU2EeTK\r\nKKuWYeUstPjCni/WZoae8n1M+u4hx4I8+q8BzmBQMXo3mbst0uCCOn+cIW/o\r\n/zPlDOeNWM3ZAyzOPauw0HRJO29rrBeN9lcSGIjZSmiWCT0QbcYlMyw3F85U\r\nKg/KfKhDcXTWOHUI++F/Zw2fJXc3VgVN825e2trL4UtwKzngaLC/wRuGnFgK\r\nZyHXjBitcgM5dtt5TtgmQt/6C6t+VTJgG4/LI2I9Oj5gICU8G5iDdyY6HkMt\r\nl17NgKeh9Tf6nhE3MTTYDaxcLWC0C0f/Z2aBikZAi4BcxZZ/DQhttDb05m1Y\r\n3QhVk+xi+kIjtBcgq/MLfXRGnOdWq533uYvEwYvpIYUahqhh1IZOfllxWwnF\r\nV60SDBJoPkFJh2rWLTsRxVxidB6KMg7azbwH0Lltt8WlR7ySosgw1NsPd6uh\r\ncQBObv1tg/F9khpiPgT4WOCQYBsJXtwxpx6FsQTpWVN/9RfDMkvtJPjWUhFn\r\ntl/JGA+gUgHZQQXaNF8gGfOlyR3lzhPxbA87kg7whCYvAsCnphMZHdfgj0s+\r\nYii+4efZAdL11QStGwbhm4GYCLmrS/XI6s5xtnBpIXkkf2gGEO4FJpWcxgd5\r\nBsywVoj4qOrOe7DCt6hT9DpikRlxoxRCbPo=\r\n=Aawk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2208121708.0_1660379323806_0.742837357514136"},"_hasShrinkwrap":false},"1.2208051912.1":{"name":"@bentoproject/youtube","version":"1.2208051912.1","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208051912.1"},"gitHead":"c9c6de085436b10c2fcf8e6c10541d6d2658af93","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2208051912.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-XwLxmDxaOYNPPmaWlBlwgjR+QkfnmwVOBtJUUGgOQ4ZJAnT15MvJmsKlVNt1qe7SJvjJC6uGMweDrtzStDhC7A==","shasum":"7d34d2d79004768e1b91566ebdb1844ae66f5f6b","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2208051912.1.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHIy6oI7UTjH5z0GHIaJ+Y2ur2KrylAvhKQznhJYoU/jAiBfycZHVT70v7XVSnB0lQLaM4vHPNEpwzEouj7mKlUMxg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/CNNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcCQ/9FfWXYb6R8gsOoiP7EsuiwcfU4wPkrny6SQemFh49dBTcL7jQ\r\nzbc8Pg8LQpXoh8AiV2qXPB2H/GwIsyh207K/W9cVWb/hlFpquE/e23JWCNOJ\r\nLKw3R0oLt1/cjJeGzxKAUv2tz9SlqK/hKPSmaJpyWoc5LJ+W5exfDmdigtDL\r\nIKzCb9j9WagRBce6FAFbyZQTFcBEJVkNknfkKxs8a2Jk4CxKLASPgt1FPvxn\r\nf/9ndwlNgPS8IGyk7u838rsYI9tMwMq+wTeeAJ6g9lz5ZnMOoamz6UxwX3Ld\r\nVgzkr/Pdzi+ufieuLvKQm31Iot4hSeJ5x9uC9r2CBRVGeadtx34ggIP/hIs2\r\n/3qwFd5J/Ehta6CIkeyvrZW+gdQBg6F0ZKJ4tG5jhFl3w7dVRec4CA3YfkZG\r\nnN1nMgp03CwiFJsPvUC0sEePzKkWHIM1dZbZGqfWc8FkyPNyI1AsaazdsrbU\r\nFbPkeiTsEXtFyZwZghf+Q34++u/5ABNtiEb9hY7ptWt2XrcVJPhVAvRAlcBv\r\nCyff+pCwmeVJKJemj4gaNXNnWJbWLl/5t90qsrnIFq8+HHqdlp2EvKDSclBG\r\nIrqe6Sbr+paK+aLMcPureWywFzU3gj35S9xxI1JagRv966QOmvlVtKOCeSpI\r\nHu5DAi6eA2iBjJiQuR7NuwMSTscmaTl8F18=\r\n=7jqZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2208051912.1_1660691276770_0.1376868495799266"},"_hasShrinkwrap":false},"1.2208172101.0":{"name":"@bentoproject/youtube","version":"1.2208172101.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208172101.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"372d5623dc25138bb97bd48cd5f97f3be8008658","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2208172101.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-FdOECRbiqaGbp9TNZwIrI1iMYj94DeN/zu0SBp0XS0oQa96LYbpS8ApXq13KrJRwjO2SNdM1LQOwx5uiGXr3SQ==","shasum":"1ead0e1903cbb2cefb8a6047ed31da7ff134e839","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2208172101.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE9Zoxi0FceVlNsc9aXO4hX5BvwCBA24W0UcsWWUZdwRAiBAkc0/vkeSx6F2Kh17tTs/cT5ZdjYkvpwcONTNK0f9wg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBpC8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfJw/+Kt3+RipFsufpNo3t41Hb34hwoMe3jpRtBECzk/J1vgPp0ZYO\r\nxVvuzeoVM54dwm3r63TKJbyUOQ+/S7yiRDXt7hqR3dKV7ucgL+kWXytTn7ij\r\nmaxLV26Tx2YBTxZ+2T6b0eCEPQkDFNla4HcDkJn8I8sVswWnYalqY5yYkypg\r\nYXRh2pbRS9OEE83Xwy3SsGnGxhQilLlKHtlDUI4hw5Yrd2Cvjh1MUA9K86CV\r\n2ZknKwBXUMqvYDjQMGP4wpnYhIh4hpi7td6EJ+zP/8y/S/84gHnLzlC8qZBK\r\nBoRDBEuVHjB6rpVHiVsEOeASLctGyjT5pzqqwcYCC8NeMBN8Xpa2Ih+FSBns\r\nPr7bWgXsjctCmcFyYmoae2Zi4uVf8BWnGe9Bwpc1eQCL5uVHuQpJ331muOAt\r\n+qqfb3TVb2vWN+CxkPROmhh64BrKhCGwuh2oDVTgrgtJ/yMqHVX32wAJKlN7\r\nXQGMMjzVUs73kAdFtFIbYJBclgUYMA0HV28EmYrImgRmBZuaYpE4Kvmp5Eh2\r\ni6nf4gviv+Ys6/Jp/YzUrHxoZRYC98xPpT5Fp4bUm3NLEPQv/biQsg1+1yJB\r\ng3tVWaGwhl0voeUFUQTkPcgWKVR8xYBS+EC9Fo4+j3VBk3V2+R+gHHF3sUiA\r\nSgGEpDCqMZ/LqHugRvwu2Oc27FLOLs/TyfQ=\r\n=0Qlp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2208172101.0_1661374651796_0.9257410694868373"},"_hasShrinkwrap":false},"1.2208242209.0":{"name":"@bentoproject/youtube","version":"1.2208242209.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208242209.0"},"gitHead":"0775e3db3f5e3447749a9de6b4ef38433f6db4d3","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2208242209.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-UtzCtmm6t/HwXNj/T9ilCs2BJxsNm2KyzhDqrwlf0cmJrsUI8TgVWQhfcBcZyYLlmAYhjgC3uGApgD1w/wh9QQ==","shasum":"adb96fb6300287f029928521bf738b7079eff30f","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2208242209.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+FJB0wsetAe7qmxSi7JQLp+wEGyFFEIDyA4SQRkiu9wIhALBa/h27n58tQl71S2qOvnWajblIIrcNlTgPufEFJ1Xa"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBzLCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLDg//RGVNy/rfd4UGvVJXh+7bCcfPmIVeJFl1ZOqOYY63u/r1xe6F\r\nzwruEqEq1ySIlgdnNmLqOL+xDSGQzzcdTz0jIJAeOwsl8tz/pO7G/I8RVQsw\r\ntUSgskyfN8TKwBYvqGTxVKp+UQ4WqwhhfqfbV43OmsUmVusoKHd/MOXVHWbT\r\nzNEO/85HMef/NTxhbjOieP4xhKtgyVHQn6apVdxfpEx5174NT/sfD4CXm7eA\r\nCsqDsGgg1fwXd0VHmG03OaAaMXlzOJ82C6e6QKesemOSYzfS7DdbbZ+4+DUk\r\nBe3czySHrLn/LuWb/ku6QavjYz04hv5nR5BGgAxuJpvjbJ5bWJFvC0uuzKgx\r\nZzrld0MnP/Tu4ucvZcQ+OGxl4gId56oM7kPtRNdFMw+m+S66whF0Rg1HmCP8\r\nuILN2HQb0qMIz19ES44yWrHqKQ3Tyjxz994eK96O4X+ELdMEHyDaiYU5RG5G\r\ncgsjktUvanhncEsMs3JSifwoSqojKzGMi3fWkZxr+vSeFKzBw6CWSJ2j6fi1\r\nFCq4RUxzz2tcHr3cDrZ3iyufMa8hMF3DHbHS+d2TIhbkpUzGgigkN8tiWbbv\r\nJuhmgEhubFFOLK7K3MVZw46s2lveHzDwM9vZawiYOdduOn4xaydMTFh8uWcv\r\n2ds6A7aCdgbX+PD3IvfXbDWjvwGnoaUIVvs=\r\n=HRUL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2208242209.0_1661416129838_0.2021523502602922"},"_hasShrinkwrap":false},"1.2209072154.0":{"name":"@bentoproject/youtube","version":"1.2209072154.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2209072154.0"},"gitHead":"b0743385edcd11eb02b6e380c4fb5a18793960fe","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2209072154.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-GHeprI6LG4tvYsx+v/KZgY+hqZrZ66KNVR1CHglFLZMtIY3xAG5WOs2ZOG688MFi5JWURWV3ycI467DZj22kng==","shasum":"7844ac9638b7ed76c9cda1c7ff4f014550e3e9c3","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2209072154.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEXrDFnuUdJwvfs62MfkrsboBQ/gvT55vfOVFC5aN21AAiBJSZptNG58Of9W6jPdVAx6Tj12LEx9C2yGdcaCo/LumQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGadHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3JA//ZaZdV3e6AXaqIttdpWa2upgimIrzhuX0MwzBq6Krq55BJLnE\r\nSSJOTVhhfMauYx+SaEVAqozC6bbQ8wDpuADvc1d1cRLlru3HVIN5qg1VYxJ2\r\nEfneaJIjY9QLTcfT5FMxl/n5lwTTN+JMxIzaAaJg7pNAgBJNiLIfhzRXZyeS\r\nGn1eNJbHiRa4DrRX5VRPKo/xZ8pmBs7F6TP0S4SCX6NUDGIMakaq29EscP59\r\nwKNlMNLqi4FRxSkRLtvb+xSOBPRA+iKlix5WLEKXKt81ozlx2wOexr3s7mAQ\r\nV2VOMsSs96QWr9fDlpTzZD0FOlrQfEsExsJrg/2lISPHxKEotJdUfW/kjLNf\r\nNDPtr0DAOBuXYTIWq7CmKmAizKZy12TukNQVJ+LrRdOqc17DwcnJ0zBG7RLO\r\nVdG79nZtcks5Ud904Rv3x9v9giIj0VmYgMHWTMyd7sHoAqEflV5r9+iAmNCD\r\ntCaFfh1HZHO/fopPw7vnVBlxgwb0Pe5V1yNld6ZKl3B2vs+FE6GB0t8Vt5DF\r\n8TmLhXXCTuomAGq8Z1CKJr8JyG9epIoG5IN4hTY1vaMTNRZ8m/0sKL+9S3N0\r\nKXHCT+K2G/YyZro+bA9P4iIW+NOZB26cgKHoucq5JnK4/VIaaxy9pta5kIe3\r\nwtGBlmrXVMCKxA3q/ZWE25xgMghxLWDvu6g=\r\n=RPJp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2209072154.0_1662625607659_0.9837488206755582"},"_hasShrinkwrap":false},"1.2209131909.0":{"name":"@bentoproject/youtube","version":"1.2209131909.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2209131909.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"b912a3976adc47e6a81ae645cb98e51d1e778150","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2209131909.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-iVrXsjdqV7H4hUPnfCotZbdNbVTM1y4qQ9A7DNEi/ZhN/4aGaEGFlwm+lgMvOW7xbWyEK6O1PlRKbsDvY3kNMQ==","shasum":"e1e5786844250e26f28229eb8e2e9825b732a859","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2209131909.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA58oO+8ziW5O9v8kqrP5v6w25lN3f28Z2uCKSfn1AwEAiAXBUr8rs7LEE7Z73ZYPLzvB+Cm290Fr19qOsnxNnm2jQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIZTeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHYg//f3rx6YczmxsHdLUcaR9EStue2vLbkLe3bJg9K9USH9rFyd8j\r\nCJ5sAtDAWYgPYyfgrOHA4FFopkdYEGecoJKvGf7pQzsotM1qPp3vLblF4MHI\r\ns5cWBsCEI5EZ48EHmGxl/sNJmcxCvGRUEl+cNfjwZbrRlCvbmq2GL3xKjzgs\r\n70SxziquiOKZ5lc8NcqZgLeRyctJ/jCT+2Rv1AWhtMjzBzEGOJWicjF7ola6\r\ndy8copBz0trtUG7aN7O3A02FC3HBCpX5rInlMUPO2nhkq63KbOFfGHEtLvLa\r\nwHdlq4Z0p2EnZ18rweevSJjdp2JEV/5lX2rtZFr7dGE+QWZcfCVQ4FbBoo2H\r\nkqsRLfCs4EaLDiDjurHrkTpxo3fnp0GZ16dGdcw6YI/dy3v339Mc8WBk4gx5\r\nJvxCs2q/fw8NjvZhCq81S5TzeXGb2S1+j1J/MfjnWp2k/6gjXqx8FnEmXEaz\r\nsP/uwLBg2rDjGex9XD2E4zRZ0p/Dj9kiuY3x31tX3I4N4BIm79A4E7nMEGAD\r\nbGrZk2xFjQrjluUElSxoWX3veatKLqsXfgGB4okp6pEGnPSqlzu3kCSfIsNs\r\njnI2R7kCHG9nOpat3BIH8WyqGIz+rLYzCZFtLpUfEKGk+3cMC8WVNGeitfen\r\ngN4yszVprTAT93+eSz5KbLRGqa42lqM7STc=\r\n=aaNQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2209131909.0_1663145182050_0.0735440405369785"},"_hasShrinkwrap":false},"1.2208242209.1":{"name":"@bentoproject/youtube","version":"1.2208242209.1","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208242209.1"},"gitHead":"a64b6c7fbfdfb75c935b112118bddb3fff58ba57","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2208242209.1","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-SQ6vs7mquhPLSIgZkdyh0tXzshKLgypN9OLH44h+cMlbHCuaM+8iSkWupCniVF3iwRCY8yhbs01w7br+dwKpAQ==","shasum":"502bc53379f2763e9ff85e9b360fe219cc47f615","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2208242209.1.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLl0KsbgKVmgrQ4DfYLrpP0LxDGczqz5+ow5HH5dYUDgIhAIlAfQ0BVtWMDuV5IU4kA03Bs2MFTRZl+kNFnQZds6kP"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjI1aKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpD+Q//dyP1dWTJFUP/8ztgIOOBKmcQzBwbbXkEBi1WjZSPD0xvf+MC\r\nr6vwVEy7gFWlr3U35Bz/N8J85xNt8b7kU3RUz1q8WDDyKmmD91h2240mm16r\r\nBDucNn4ipvq7c4Zzntb/m2BsXsOn/JPPNgkOujKBvbomCD5mTL7bNcl2Vsme\r\nPQ1P4I8WLa+B5WfcCw3zSlH3dStNM8vpnwA4wMIkrMiB8RaHvrow2kdoJJpw\r\nEzWV+z6EHc7x2rjxltd9AlYf7CJqKSR8t8lVm4H3ohFtxYM3O96LTIMhgquB\r\nHbRrRPg/OoGaNHJikd6GiMAC6mAQm419Zbxte58vMF+ympHPzWb0FKWBi7SR\r\n/PTQhPUrazFPM3t3oEcQ780XU7dU1VYiatnR9/hjbN7OKL6uQNMHCry07uTo\r\nu+QkI6q/SYsrY6wdrHcUQyYGzK11qJpCm6krb50uxwHE0zMnnJyAbqqqcKbY\r\nkXxJKyv/5NApuIGl32xVdbUH/fAkbyxhn651yH++idrtrHeTxNmABM/MSwy4\r\nj2gnKDqLoUzwXbeXIQ7yb94d0586ofwLzBMeKEvaUQvB4eDypuTE7xIABNCv\r\nTaD0SafOeOsSVyzh3phTu/j9YoB1MsQdA32rviI07xRjQRSYyUG5LbYfbWAm\r\nLFZyjyQxRaPAOhiii2DSugXTUuNuHSd7Vjk=\r\n=rITx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2208242209.1_1663260297929_0.717703315623446"},"_hasShrinkwrap":false},"1.2209142312.0":{"name":"@bentoproject/youtube","version":"1.2209142312.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2209142312.0"},"gitHead":"8484b3b1dc31fb138a231b2368acfe2cb4eb913d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2209142312.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-hvxNPKitPN6T8xrHmUiZNPwtFaHYzl2RB1DXiEKThkqhI+oIhWcijCZeSpIR3F78J31/BJp7clGbvOGO4qu9/w==","shasum":"abc0bf17d289b95553ad1af8e8861f89560f97bf","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2209142312.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBIiCXxsj66QcZXcJuH6YEFYBhUCpzCfvEiT0+8wmHkuAiEAiccPNY/VNPSApIQTnk3NkzjJ8aSW7dkNDp3AJJDAPi8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKjo/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYlw//XSj/N+j6yD6IC7KcQBK/67Cv8yGZxBJqA9DYT2SWa5TBWjUR\r\nKYgsVrQT1xBIwmaLHWkdbyeMoOHeK1b3V/jz4NGYYVlYiHGFoGAdZ3DuapNd\r\ns8vFgAO3/Ky13TVVLbMNtSG81UsWxc8YuZzimDVMY5yEBFUJztr4sbrZoC76\r\nvH4s1xAfrW4t45LHAijNDTytbnbKlakVmFeMz4CG57Sw+sqyuRbQXQ7iMSzj\r\nwdQbGM5mVgOxWwJ8VLHm9UjKsB2SynUvGil6LHTsc8MBsi+Far8A6Kohvbkv\r\nybsQpLaQMvb0RPDfYWywJeio06M54b6tdvkutU0rmO5b9Y//xKLRItsC/Jbe\r\nQgQtavLPOeR611knwtO0YMe/i3zJvRj+zyQ0X+DR7jUM3A9wuCr1qAC6KrfO\r\n5Y2qHqDckl1r9cixbsOeg2MP74bk181zbT0mx0Yhj89mGuct9cSL+TkUODU4\r\nknyZ8lgtxoqlqZuFrzUrVp9Wrln6aL1qa1JixnzKdbDlaUykue1C2Am/UU4V\r\nrj4vYwBF0YYQW0xwT8PZUr4wkCGBZy20U6EctVYLGhcjMQAS62a7prdZWIGY\r\noA9NzF57eH5MYMlqDaFn58fZUqgCsVsDmnz4+eGlEoCKXNK6VWgN8MJgeSyN\r\n3ymbQn7fFj2I2PY5SiNfIN11gBa3DHjM+hg=\r\n=Haz3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2209142312.0_1663711806960_0.5559713239830479"},"_hasShrinkwrap":false},"1.2210010655.0":{"name":"@bentoproject/youtube","version":"1.2210010655.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210010655.0"},"gitHead":"b0c5acce5be2019b787b6f4bf7feb13b045ca7ff","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2210010655.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-3/ig/4mi8C/M6UVIQag7rfgjw4/p3GX1VyoW5exYzTgvUMasDzfcHwEKOvRAl6EzRj+NjKdRuKHe3b5FY0qo+A==","shasum":"98e730896eb1fcb1da6351e1feb04c6fe923458a","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2210010655.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICQCEODAjf/SFsi/jTtme0xAXuWVjQwBeSXfDEX3A+UOAiBVzcvBaOREnIGVcyo5KaMvOj3cb2V0McIeawWfiTsjZw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGSqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeZw//Y7IQBp5B0szzi8d8i4FuFLFPoEpZAtVRytnJT1LbA42AgGNs\r\ncvMZ6IzYV5V2AY+4o15TNbFeZC+D5lclXEtB5vAO/V01q3c9qfeRnbBfuqBv\r\ngYvGEYQiwldv0ECts61omsU7YTxGQwWD/6Tdbf+4VwOZOEhjr4n2Z+Ba/1ie\r\n5hzwhqG9N2KBqe3azN+TfyOzGcnOgy2z9uCEE/mZDli4ZqDRmhN9NeCue+mu\r\ndoGNQnOtwryicu6fnHRPGVBj3cLUqmLDr6WYWFWCvrPysTrzL3LGXo+Qe8Ne\r\nAceWuqqtFdMKS7E5R1RPmdIQtPHvvUnKWoCLZWZ4skk70RdE+Cx+x1fV8IUa\r\nTAeSBcqpqEpedBBK+B/bh4kCRB13/J6hwr0dtaVL70iroqMmIP6sn407VKQR\r\nkhVrZDDdzy/Jgs5wluC7w2I6pU2KtmqeS/snhJdr9t3hsV5sCmpTpE8o7t//\r\njWQzGgSPzCGsfpeyV6dlusFOrdlWqIPWAd6uS5Ux3wga+m7WXLBXnTsgCl2v\r\nyvITM/f8wquMqt01w/YYdJvyRgP3mOMOYsP0TGXDGaMQJ4RscTOO7M06r1xJ\r\np0bHqRAosAoHn4wxpoKHCMG6I93lP0VNFYE3nEEPd7aKZvGhFWCEYASpZEy1\r\nEu2B/+g50mKq+dCT9j+59KQhMd8HVJnSGlA=\r\n=KMi/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2210010655.0_1664902313843_0.9108291810638263"},"_hasShrinkwrap":false},"1.2210041838.0":{"name":"@bentoproject/youtube","version":"1.2210041838.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210041838.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"e79aecc1c4639b06a7f2843d961bb14f293a53ce","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2210041838.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-OT4++DWPdZSZFAqJOE09gN06nf2ys+dqp7sZoaaqb+YtAeD5l6153yOSbYtQZDoGptT8I56cCb0iudI0PfUaGw==","shasum":"b1005fb4813c1afc9b92305b095b82732eaf24a4","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2210041838.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGXK32HjLampHc8IICr3uRnGg9lnawvqQmeayXVUQMywIgJvJN4Bo3ius7ZFxsxN1odA9DjX65aP5GdiQ8vDs4mgw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPUD+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPCxAAjFFKeRXEPSHypmMHpzvdfgv3FPB3PV9iwtmeYvCyJjaogRos\r\nC47oUMpLfCBx3REf+KpuYcIKWk3qbZT+y/ETJMwds5Xyosr+g9PfDWQ4TV7r\r\nosU01iJJoNY+TdCp6Kennw0Y+JFZ55Qby+7BrDxJwEL+uXMqPlGAKhFicCj9\r\nChFJadS6DF/4HYpEc7RSLXh1jF+z0Ji5f5AfXev6ZIPITsVsmRt3o584+U/7\r\ntukuVI1a5zk2BfX+o/0rnEmcHuCXFdR2WXyJxDBix4UkGcAJc990So6hghMc\r\nXAv7nCoBvj+YvgmzxFtIVao8CR50qgWxi0urAirQ1sPJ5yn5nsectozQ9xUf\r\nAXtXve7JhsonGTqZCW4NILjXUEjM42GpLSBcOHJQZwelbuGHPn/ZwpHD4pwg\r\nSMC1mG9c6xQN52vnQ+6ydR0mvCecuLy/ll9FUBTV1sxdTO485TAIFtjdv/Hp\r\nRFQlHgYGboMQwltJx/pdRwiBhdSIhDWsTEZr+GDJ5VGhao/Hy5GdxZrmwBq4\r\nzos2ifsBytBQEPDi+9WMbCHQQSuHKO6QxPGfgVzTu3yXeDDM9vAWHq+3h/1K\r\ncDfLvNcYjWtBqAbsmKGh4N9gWKL9FgE/+ycWB51IQAkbfO2QG1U1iOo1lCzl\r\nWCqhHBOriqXWQfsFHRqqLYoYv6+fhw+Gf2M=\r\n=9Sgy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2210041838.0_1664958718150_0.9735078743378169"},"_hasShrinkwrap":false},"1.2210052034.0":{"name":"@bentoproject/youtube","version":"1.2210052034.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210052034.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"8a0a0067f57f89d0566ee1db3d4bfeea072d3c56","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2210052034.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-tYegStFOxefL5pldoJsCmMSgIIOr5/ZXZ8R+AyZ3MmxJGN5A3i6+FOHT7vZTdKRAlPgkjZN/rVnX/6JmK0+pyw==","shasum":"7e36f9b425b0d78daf46f2ce967b2e1bf799a4e0","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2210052034.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWPGIgqRR5cZ0rW26UAmnsRd8Wm4AhPEcmmb+dM2nPiAIhAL/lp89Qd9wnWUcSNB29lnRrfoBPH1CQIzqkT7vQo6Yc"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPpFuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzzxAAlxN6ehR7vyaZVkUNGYl+Haq/+yFOSs8buIRTcKA04CZzzRH8\r\nGxeV1+zqxObonx9ET/XVbA2+70HYEMrMLfu4Pfd4waA8hVj1zZC7pNnvXjSk\r\nO1oEKO8TeMWYooUxd0QuCzahG64keHvE/p3LutwOvqUMOxeUYpNxdhCt7mzb\r\n5h6sfUyKVBGuZIstTCJMvezk93OAW7LYDHrGuyCjcBGxnfmgSDvAch25QXDn\r\nRxxS4ltzmjiuMxbsUUbdk8dDhmbhDQtTD/NiHFI0jN+Id4qW4wpiYH+ueeFq\r\nviKgx0PAOkxCDFqEEXFexQ8w/szzF8QePqKA8IrpufWcfSkVPWAW12ppyPPm\r\nEgUxmu4y7s7sqonp8WQTMxhs1su0YaAHgUw4hE4ocNqElGzgCZ1FbzjbxFgb\r\n8OAyEvDnCWLAwWUF2wa9mjITq7ChMisk2kR+8OI/4LP1y2G9O0a/7RFAaM/C\r\nlVL2fMzyiH+s3IIlvlFRdO+Q0DSQ9eVs+aiGs5MGoYmbf98K76G1eE+Vfomv\r\nGKCBdzNDD1m6hNsKL9R/r+O0Wb1sZGhw1DCfVj3L/FEiPf3S4ILpJBHW9U4h\r\n2nrdv/7b3rlU82eNQJ8Z1aRmIn9xMMMfqwgCUDAtyCXlrJccfAV9QdKY4Vac\r\no/GHmZ3W9nmrgJjF2reuyJofvDrzrsP7rxQ=\r\n=u+R3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2210052034.0_1665044846319_0.5593935800706076"},"_hasShrinkwrap":false},"1.2210071758.0":{"name":"@bentoproject/youtube","version":"1.2210071758.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210071758.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"7c969ff5fd5406304f6a9867fa0db59b74e94524","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2210071758.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-v0p/jLkqeBE88Mj/a82rULZxJXVycBMM4cDv2eIMDTejLJAbmyqr0h9eZ4y4euy+8K66reJQ8B1OvufwmUfQHQ==","shasum":"bdfe0cd25b09899820169191ec6aac9e62cb6a41","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2210071758.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH1Cme6CYOEzzsVjmTNouRqgrqIYMcQkKo/xXfGLWZ3GAiEA6PaZpKZU/x3pLm6UFpfdU4mHGZVbg4G//Od8npNrqiw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQTRfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJXhAAhnzifvbfs6glrOri79K4pI20ikm5qxurSK74asEcAki4wRfs\r\nPWmpsgF944EgUiWCkuylgbFY6JF6OXAPsQHA3zCXOJHI3gLWJw4UMOWYXpUX\r\nZJC56sVbHxncnPha4Ovp0P2RytRX9vQOphau4oqpxUewBcM06KGf7xfyYp3R\r\nhymCqqzX6XOXy+7gCI/NepLf4ZZfCFn4Ah92IBF4vceW+dNL17csRWM2XBte\r\nloWTS5JlY+pL9REb8UjjuJaZj6ZC24VPzFRzKnfdJh7rTaWYeSzjbx2cs4Jr\r\new30Yw01/VxLnGJMDXrMKB1nedlb7AQBAPIVkWeksZF6ya5Crcnw5fDa+Sr6\r\nL8+jzj5VY1vEa6eYskmmU0Y+yN5DKdqitIdpETUGk97JeI95n1sOgTfhTWIz\r\n3BGHDC+sojUWVFR/UGV7ttSbI9Bi93qQavm81S52xg6zacqbotOAAH1KSrEH\r\npKQM7eIYSlLBpJfsJz3Jdw0MEfTM3h0uxUPowF4MTWf0ZRLlz/JzUxSQJtcB\r\nHVf009JWIq+J7H6qRabRUbWUZs9HRfqfZ/iKvNAUIhp4spgnkUPhjuN34MDM\r\n8uobjmjcqt42bNdIxsN+KE6wOC02rtjowi3G1/wnbDGy/HCH2q4h7ZHtO5R3\r\nOoW+6Ntdb3GyaPbfPpse4uvds9otrkSvzZU=\r\n=WUOk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2210071758.0_1665217631341_0.2641616843839345"},"_hasShrinkwrap":false},"1.2210112333.0":{"name":"@bentoproject/youtube","version":"1.2210112333.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210112333.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"1d82bae06844d5413aeb632cfb2f3ef443548ad0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2210112333.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-k5/61SMW14EvpKkD2sf0DpaJrcSjNuQed8rkqKxg4/svxZlrl/iIeGz5CzDL14SsBcov40+5dKHSUDnR6Fbt6Q==","shasum":"224b59d5618a4a381ade2a1a4543f37853ad0603","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2210112333.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG4s3hY0aWdi2RcOlt+xa7v9q5SMnd2gqlQJoRjjkkztAiEAqNquLY4oH+0BZousES5u69iev9+GJigYr3iXXNGIS7A="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRno8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnphAAld3Hb6aXl0Z+3knIRoV2bcJZMNhfzO1StPqxof/zSgmLTqlo\r\naaWSUjqOvPRUxjDgXkm5echpnsnHKX35HjUHtxp1Z8yIoyhDMMmO7m1MTBkq\r\nvSPglcWQCL7SoM+p3z/NespikMvWD3B3wnMnqnOAheGr8wOUBOrWG43jh1m1\r\ng5Fsej2nzOkzaz6x/TgfeeF5tVhhgAh04gTTiu49HNAEXx5teAO5tgA3Ubx9\r\nRmB3GXFGKiQ+nz4tGKb+bCOk1KP/lyYSJCwktXlIJ+iv34tTRRO7AIUWf7Jn\r\nD4WjmdSe5necQ/8GkJ/Dr1FIsVG5hJ4sKKX1Bc9PNYqhQfGpmCee+J0+1qYS\r\nIa9JNPjHLbgZQ7z2k+2X1f0XUYec7+U65y3F6EheowRKTdFJlhwKKXivDZ3h\r\nZzlvoKUoTaYTB7liO/brz5Kni+CynSv8gR2pUjw6SGJrn3StE42IYszMTmQ4\r\nhZhU29wSjQCZmkCOGS4zEisZBI9V1YnpapwIOBCyuR+I0jnQK8sN5khOeJ3g\r\nNkUDFLNau0+1OK2ErPHI9QxK6Z/tWktYUr41B+J9MflctGNa93jzKb9s5N2Q\r\nIvy2tdbjPrWss9cmwtVSf0bQyecEPT4Pyejak6CWEBgSH0GqF1mxN5KCM/Gy\r\nKDT+31gSvz3CFUuBxmiq7dcEY8pQRpuWGag=\r\n=xL+d\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2210112333.0_1665563196289_0.8609217576480452"},"_hasShrinkwrap":false},"1.2210142102.0":{"name":"@bentoproject/youtube","version":"1.2210142102.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210142102.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"4cbbe2b23e7b0c5b0c005c94a574ea48a45f7693","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2210142102.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-w+rXBxTfftMjwzVxtCYb/KZsZreJyzybs9lmXI8FVrotDxtPFXpp2y/sfu6Hgslz6+TZ3t2yTcHzUcvpXWugzA==","shasum":"41f19e73b10a3a6a3f7ab34674a9be86f54a74a4","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2210142102.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAIKaLlxbK9BX7vzHanJJGZ9vhxxA2UIefw4gSdk/OFhAiEAvs6Hle8QZowU4+DRNzTKcBm0shHTxGLwKk1NpEDjS9U="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSm66ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq45g//WrXNPxdyDbomTeeva28ekyp2d2WhoaHsc0SxOjIyuj3nVzvB\r\n8LWG1vp8IN0s0Pkm6zXaDMUekYW3AqrogCno+7NG6wRHgSDyO2Xx+Dvai39T\r\nxARXEbfXaYoZ0zEZ9gEIjKkWvvYzdUKESBH56C9DYmWWSm6+PeVwcipsfduH\r\nFRKfNx3l+p3kvQoHknJT9kbPZQuK6cS90M/PYOg+I39cmS/NyxSTEOxmrrZQ\r\n1nqRWI8mvBL9/THdKlkYmTJkpjoP8WB/kNNsnc2uL9y92nEJLzbSZ6cReJ44\r\nfxfQ6Cqj7EHuGd7S9ZQLeUXc//BU7tfzOsTJVDbasw+4tGRrT7JKlIHvt7Pe\r\nBPNWsvWqNQxZ7N+7YH7xSyT48aeP6mg+tRtNiOw9oKcR2nkIqtIMpB/myqQS\r\nLlZPZQoVS6xyYzWXJZJTHz21998nw+sz8iY7hTq3M3JY5gd8tXQ/27wmolq1\r\nLTcZfo1lQy2Wa1pJpKhrRDU82GPq9Yp6cqLgXw3FwFCab+xB8zi/1lBY/JeC\r\naX34TuvnjUsSD6Ozcsb94UV2XmVXdB7faLv6Y5DiBT1aPa4lmhuJwUp0ncrT\r\nxcZtyjuVEC1GEOdtbgc/CrvqkbniEXZsV+sx18A0moDmqfELVyJYM+uAoU6N\r\n9n9A4sBetTH/ONDxTjiy8FdnhXhDmahcs4Q=\r\n=4wiF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2210142102.0_1665822393858_0.4236464993328948"},"_hasShrinkwrap":false},"1.2210172057.0":{"name":"@bentoproject/youtube","version":"1.2210172057.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210172057.0"},"gitHead":"fde225e8d98aa5d96a939351e6e53cc7abb13cf6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2210172057.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-c8MUR74uc1CxGWOnMYwKfOco/SKs9aicLVXTjCqPyc2ZsyQwAdv+uOhDiNS5rdXAsqiHzgeZmL1rCwWBAc31Cg==","shasum":"5dafc1cfdb043ee13b2e7238ef067ef8a665eed4","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2210172057.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGCPvX/W9TLJzm08CL6vd8N+RT1uMxha456ja05R0c0eAiEA41KcaHxWqClbW98tnjjlWB4UyQXOqfA6DXS9iEmL3kE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTmP6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHfRAAif4jhpO9WKI3rsLBAScHnhl2fWVd2ICXrD1gfo2t25nuCDQt\r\ngL2Jlxsu/NSLe+/m1f3gWWelrMWnxKshpY5vvCUqkRTlKlVgdW89tlvxXASp\r\nlSOAnmnFwkLp9falqB3NHWVS3g1HpgFIb+Mk5StPLxN3jVR9HZM2p/VdHpsU\r\n+Mj8K5SxVPBgJosgCBcc1favJV7WpRReDL4R8WTkNtb1oIqOSETw8f/2ES6u\r\nmcnRe6Y9HWQmmxCfj3VoGc/mWeHnB9d05KKwwkzV/8QINM6nmjKk6JJ5wTen\r\nesytsLQa11sUlFEEf1qgr1XPwCsqm0n0M9/z7NIZSfWBUk6qJaIi05xIE8Vr\r\nV2VprcUA7m3EDg3W05j45mXX9505T72fedRJN3oVOeLwWlxfY6NeWJPBHF/s\r\nA4k8yF7K8gvOjl2uoro8apSG8OghMfzxoa4E6UiYYzqqv+57KV5WYqAYKn00\r\nLgRZWmAzBWgNPKxEaRU3MHJCS0wgeQEJuloqLfB4MByC+GCHDMPXinuFdpOm\r\nyP5HsAi7LUknG5RTzqaoiz8XcE3/zLoWDup567iY4WFOwCR6bRJ8qJe2YeXl\r\nhRVXXlM9CQ4RDvFmL+WLmKDX2rM7f4uWkHuF5PPERVJk4tvjGn8zZ0Hsr72c\r\n66Tkhnhz07mrWzaC1iOoGOPkLtysnYDmAC8=\r\n=/4XS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2210172057.0_1666081785830_0.3045459930862966"},"_hasShrinkwrap":false},"1.2210191347.0":{"name":"@bentoproject/youtube","version":"1.2210191347.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210191347.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"b2888af97582abcfae901ed340328b22e9caf2fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2210191347.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-TwL6b/jZ7JISmCs+aIbZoJkanmK6gS4RqWtuRSJH2KsI7FfRuqo07/fEVFRidQ5ObPjFeMisbvbHTowG1VJxGQ==","shasum":"0ca9ab5151ded2386f00216a94cd3e02fbd1b77e","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2210191347.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTuTfoCZ0w65NY3WIeDbAZveCxXnVilmgw/oQZdnStlwIhAPGzv2gp9DHQtycG8uMlRYleJn4E6ZEppd5rKKsZHKAR"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUQZoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4Kg//b3Ts6GGEQNUuaDp6guyGy13SUUihaT1ZyBfQKInQzZCKuLE3\r\nJ2g0LMcseMdBgH+E4zK/4n8QrHJUE98Po2+85OxilMuSAJht54E6Grqkt3Ez\r\nCXRjJHqrF1UZczdgV7qb0IREUw4FHA6/3hxI5XhKClKtTmxwWli8v6NevF5G\r\neMTbMTHIL8h190SWzJqZduJahXbaW8jK6Ze0AbfFK76dQKitXVzwvB2sT15r\r\ni88Qd8TKyxM+nBAOvUuFFKqBO11phzkq8PHGfcOHXHe38myaOVRAygB7SoNy\r\na0Uo0qHQHU0sotZGxDmVGzWzz2j50dgqXicqXYPsLvMWtdroKmUwD2VoSYzs\r\nWP2akShGmUM4e8JVQqSW+MljvOMkwKj9pXudGu9Hqqyv2pNqkcO2xRBw023T\r\nPCX83S+T6ZvASMKiGFAz+08RA9HM1i7heUAu+yodsHClAqeFM1ELa6+AjdzJ\r\nVFnyZyxAKOtM2LVzNA4ZMkneBs2m7aEVrGfzRg94i8cKnHlbBia7Y438VUXF\r\nRU1LUS990wzPYCU2rMPLOmqSjYHZBkO5bIY+jpkKeuFNwc279MXusSt6K9nv\r\nwomRXargBytEhvj+Thfhr93xec8ijDBroiyjChBq0g4NPAzvG32av37trvEn\r\nICd5oI/FtAAZ4mQnlJ2inIP/97PhhJt5H7I=\r\n=dZLu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2210191347.0_1666254440536_0.030365682810906236"},"_hasShrinkwrap":false},"1.2210211855.0":{"name":"@bentoproject/youtube","version":"1.2210211855.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210211855.0"},"gitHead":"07d99f82baf83d9f0162a6c7b8790cef43e820fa","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2210211855.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-P+fDB2v+AwHxuVeVyzOfj/PSwsIVfHu0HnoCJq7AJIAdso8ei7C0flEt8uFHJfVvjqrubiRA6U2L0Hpj6LeRhQ==","shasum":"1a491f1f569708e2646ac83fcfd32731ae2d8774","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2210211855.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDViklrfQOCbadYLYBQWOYaGjmeUcOMbyScx+ljTQKMvAiAJblAtAT2OyLpnGHkrFWyXxxrIvwlgdek8dMH0fb0a5Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjU6j4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp87g//ZiJwgJnJD16pK+M9O59N6EkqVATCb1MdIpJxR6/1UG7DTID2\r\ncInDIu1CkEyo4Zltz1J/S4RkMKn6vJ+XaLWXxbPdhX/va1/GDW+LPVpR4IuK\r\nkNSd3LjFYoLezI6lB7hpWItPihVr8aFcd2IRAt19NQcS32fRzmrMHfkI0+nd\r\nlnRilGQB9apGzovB21X4T+2rWlEFkCbKHw4ojj3o5lH64a7a2LZXzOsgGYdW\r\nes1SvxSN8uAPU/JiXhcgIpukSdDtkS215wwRxDQx770E066Iav6/0mSOBJXI\r\n23K10HGlSIYY4SYukFE76xtLKT77y0cGvZstF6xcGV6EA5nVaFc8C1yAvLgv\r\n0sR/cGfUZtnx3dMuihMmcfBBjsIHqfo2M07dAgZjqtgEmTK8J9qCcl0AURIT\r\nyvoxId+t3IIaUjZ41peyvHv3atfiCXRCw76dBGjIYQyYhC3Jr3/FG0TxpW0N\r\nrVz3cvdYQlq6o4OSG6sHbOENDkjClmbWac00B4j6eS4LDv5Rwnk/LRHP357q\r\n3KFrN4gUJ/9SNyMczKi3X5qthUEHWMI7iPgD9LjNn0Z5Ww+dZVh5S+PS8+0C\r\npMh5p/cry73x5GNfOMQWuC7Zege4JFEBIhdZ7pDjo6YB5DDSC+zgUuSoTQ4Z\r\nRuUOH4Px7WkdJrt1t2TnPk/8+rxIYBh4IYc=\r\n=espm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2210211855.0_1666427128479_0.017042517974191096"},"_hasShrinkwrap":false},"1.2210251605.0":{"name":"@bentoproject/youtube","version":"1.2210251605.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210251605.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"a1f66509b5a6104dc33409f285dac1ab133942f6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2210251605.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-Np744fMxqLrjvNKGvur3CpZ4qNJxeHJkG7A9xb3HKArimVaRW8zidRGs9xBTFD3cJV4mV7BNZp7K+786oKk51g==","shasum":"9689badc48efed852f989f9d86a4c5b966bc98eb","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2210251605.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBSHujUhKzmXlrtwAW4S+uqnbSJ5KAeImfJTTOyaqU6nAiAaw9KjDYuZ0LuFvqnwPGb1BaRwTpPeF9T/keEhnevGKw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWPAcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmobzw//VhSEth+n1Ra9ACCgomY/PrPSKgUulOOC/e/OUyedogVsAFPi\r\neutXeD7VWJxnNEgG01EtZEnAGM4LB9kG5XErF7c2dX7C/aolewqZMicyIddY\r\nWiptcAKuS9x5Pp3w7s2w+ccKkd/2zzSgsv3AWxgnhY2wrJCQrMMJ+OTaXL1i\r\nDsmo9B4EDSI0p87W1saT8WdZL59Qb8RwWWYNZ81IYTmu61uGBZ4kqrdDHW4L\r\nl37Isvnc3pEwzGnUN3vwYd2RBAvpgMjEDwDl/n1G8BI4WQ4M9wqa2rbzG4+p\r\nUwVmfofZDocY4w4AwzqEdaw5aqHPHcKuWJtVLHwuZRj3uzqXipzt06ASywUw\r\nBPcMTeYtDNhpONUW6VjOeKsrvhKAfblo2RWrGtMiRANI9tZdsia1DLlcYXBj\r\nK8kgpf9yMV6/v6exA7K6ZD5xvraMyZOdbD2WnKFcLxH9EkXNrtmMGVAoJisS\r\n/A34Qqn74mOLFc14taMEv9v9dXm2XS5jx3sR4MjjR5adCYI+YG0bEf9K+d1R\r\nkU0fpEdC8y/0Jb7WA8eYLUyp0qohJ7flVRN2P9sH4f3+8XPvDHjp/WxDiPJJ\r\n/+zEwVL3OAHh/ulG5qzW2NXghNsUyhIX38KAZlDPI4u+Q2w7XuzhiheCredk\r\nYlnk7rIUFvxTmLLu8vJKtGQQbsFWZHVSXVg=\r\n=73lO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2210251605.0_1666773020308_0.10414251281848919"},"_hasShrinkwrap":false},"1.2210272257.0":{"name":"@bentoproject/youtube","version":"1.2210272257.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210272257.0"},"gitHead":"9664ef260a4ec8fcc997a65025bb11a20fea937c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2210272257.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-2bMSJHE1tHEXIKipCYsx2yF+67gjs1QVQTy9s3XDFmggew07rTcgT9Jq20iaDCpOFGtAjs/gqDuRhoumNXtt9A==","shasum":"2ba509eedd74ee565243a033f4563d123b3b092f","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2210272257.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBRsp/ulKf7TBDBg125HuKb4pjgjqysyZoGdY6zzCQMrAiEAgOJeZOMsktoW6A1isAXYCk6XODon8HcY/lkl8cbNHfw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjW5LQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcYw//TzegGB3D5MayQC9auk7MxqfHBynYUL175absO5aK3P0Qyhov\r\n7eQjDgitO5CKPvyoC8cHbUNZRm4b4myzwV6bs9KcA7Xy2OBsmS+oRTauMt5a\r\nSZuAhd9F3N/toOE8Y8PHZczBTIElYbni3jbLY6GRK81KmSAvO/RKKzzCTrqs\r\nDZbu/QNG36osP4Bg9Dc45vTWAr237DRdSlYdgtdBDly+ddKE1M1CqX7xydAo\r\ntaSrgNVJKbhT9a0NI2WVWnBma+x0GIk1fDJfR34CC9IMe2/H1iIuvsRymKi5\r\nKbVIMmF2YKNIeVo4ZZRCYNTGYr5bWOHqC5OqRkl7eRu4oQyFrjlSTy74UHUj\r\njGEVGKft9b8yHnNuzk96sv6l+rit+++eoZlwOhrpiGdh8EexyrkulKeIPDL+\r\nALw208/WhUN4mJbbdETfF5+hhMG6ogjtFtFOe0r6SKWJ1wqjL2aNZyINUQ5l\r\nLfXabZWun3Q1swimoIaANvQlcfecK8+FLScM79phbiBvZTTLuhLzJXvRlmcl\r\njmew3g1abc+H14U7YmJ7OxQSGiM0/FrEbTrZVrGxU3yaW410nXlkMzWe6c+g\r\ng+fmDNCeZWnzlQJIugvnygRh+D1Y+Y/ryqgn2BmtV3AhWfb+ikuSC+5vyAZ6\r\nP3lhXJ0+Cw3isoU1DHHjRcqJyizkO3SltAk=\r\n=lsLV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2210272257.0_1666945744479_0.00857035403242512"},"_hasShrinkwrap":false},"1.2211042305.0":{"name":"@bentoproject/youtube","version":"1.2211042305.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211042305.0"},"gitHead":"592500a0e400703252086eb8ab7b1cd46d674ff2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2211042305.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-bQ3/d3wid8/+n3DpwlDzARx5+pZclu5G0sp0LZ5SRPO7KDL4l3MO9/rM+tdcgokqIYEFYtnt2cERyMuSpEfzSQ==","shasum":"969c6700379b8baf645b8677d570b75343e501eb","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2211042305.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaHkGz8sbtTbFV5Funv3s7s7x7trBBxEt6hPQN6siHBQIhAKiY/LqEog/ClPDSmsano0odtbWld90jYC1dmGTEaENf"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZh5PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKEQ/7Bf6edCW1v0sGYQCr4lRyYXeBC5eB18WVCymWkddeszidBbJ1\r\n0107/JXGlGQBBD1cEhtcFXncGOI/aQS4OE3UeGgPGJdexlJ6e48wYKfsBkqx\r\nAjcxw7m8rfOOhQrjYZ19wCdIJzgX9I/tukxeffMjAq56upPQL4TUg3OdXrec\r\nm44Rd6fMP11w5fFjl6AKg92V8R0LGdb5l+5HjMp7+47oLrA/ovVr/QZ9Hfma\r\n3JqXwfRPsunpBhhGgg2BSTsNcCJuhnl6o8Qv3NuNKjAWhsLKF/ohyznTBIMx\r\nrMbdmm3srq6Pihe8fquwI8kq1AZUk15eneT83V+olygc7nY4wQHKc+MQ0fZW\r\nv+QD4G4wU+Hljlbm/nEjVimISxd80FL+NInV/6d2NRbhE5a+cFuznTremT4X\r\n2Qlwkykm4+ee/QfqCbsZxrtwBSbp07RTb/UqH/ilnoxZa7gklVunVkgKwkky\r\nmgYpmSTsojW7epWToaf8Z1FDeMhbRzE/Jzy+8tosllqnns8u5vwX6YJcDlAv\r\nWbQ8LJwZUadjZ4zCXoA9u8W/u/k1WKYf0aPoFe5g7egti3rkt8rdsi0uwmyd\r\nAIKbrehlZJ0cTr2cl2ug3EKFdqH3t/4M2x4JBLsfd1c90ugdcCFvSFBHX0hC\r\nPbZCiEMizw8J87cQ24/Q5Vv246F1VEch+pg=\r\n=ZZtw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2211042305.0_1667636815093_0.002076019589923206"},"_hasShrinkwrap":false},"1.2211060024.0":{"name":"@bentoproject/youtube","version":"1.2211060024.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211060024.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"f6dce0a3fbdbc90de3eb1773dbfc31ff1e476460","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2211060024.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-gt6TG8qEJlI40071ZlCUrgNK++WbJLcX58+WXOt+rTqwhVoFinUQCq+BWu3a5uUcsk0YE9bpp0inOC3Pne3aXg==","shasum":"7a551e006d1a750a039a0f5cd8216e2bea7c79bc","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2211060024.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnF6jVySz0BBwEv5faBj3zH1rcWCVKASgNW91ZvyTTKQIhAK2P0Cn4Qb+yVrNLQo/LkjyhMhHRQooODkWigw3W4gRh"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjahMVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgYhAAncx2mFZ4wGjdqJXowbBbcl5aKDWXblrrNN1D66VuCc26Q8dh\r\nVj6r2ZJoFkUynLe2U0DcP41YAmjZ9lRQD3UFCBpyZ70rhwMbGY5yx8Y56JGW\r\nN42NS4oIqBk1GdHQadtEyC6xSXyyjNHuLukdcM3V9FoXxAqNmD4ZU9aE8OAZ\r\n8sn8HIlx8D5aWfJHB2F9QOfTYqMFvJP7VGyWKD/zRHK/j58HsyLf7yHEanZB\r\nR9ReaEX1dHq9O82zDQuhvWM+Z9N+6P6FGAbmTsbb5LUcN0meg8sy6UmpDNNO\r\n6Jhz7whOgV10HTOayC5W+61bYOnUTkRqd6Ish3U/7J+fIVngy3W1rK2hYSwx\r\ntGUXk0X4OkKX9aiMyKAUzPbj/JUOgO2+snY3tida8xpp/pQIYfiONTfPc1gn\r\nNcml7sWo7+5DPyD13xrg76TpOqX8OoTlaAZgu0/yR9baaOE70a8YzB7qcpVU\r\nkVV8xL6pH+xaBlDDrKCb08gihTzYJ0PGeTUhrJBJ3RS5MVY3OfWiWfwaT4sW\r\nvBhOHskmi+Z/jm4ZSv2ENvJVtKoLjhjgsPaqI0E9NRrf5sz1wBV0VCtL7UcP\r\nmUsttfaN9JFgyY7l9qTtEPsx2zF9Ik4NSl4nY37ePTUMh+CscJx5qk1K2MMB\r\npaFOvQwV+tsuMQHlJaDWNRrOA9FqiUPM1qY=\r\n=BN4I\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2211060024.0_1667896085118_0.6396543968250386"},"_hasShrinkwrap":false},"1.2211111611.0":{"name":"@bentoproject/youtube","version":"1.2211111611.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211111611.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"f9c1138144838b5c4612a779bf407d2b2413d105","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2211111611.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-nv6xKxTQkZgVjydDpnKVhrBu3riLBca7Z1wE9WZn9B1ajo5rie1yWfBOQNqLDBrqCn34fq+m4msSMkCtlEvlKA==","shasum":"7633bf2131aa2ebb5595c8c7fee80ac2f70612a9","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2211111611.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEU1AL2C/fIDw3ZRwCNQD4uFOkMSC1ZO/v5Cqo9N2R/9AiEAisOPeNKEjDP05AAxjxSPuZN60zPhQA2UxtplGvzIB2Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjb1iiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmpBAAmDD/zsYllEt5PTt1pxrutzvQZMZV9O1/lASkor8R+eDaewRG\r\n4mNqQZ1QN2j4gDzVeua+V7EjfkTZWLrGuCq+c0CytfJvWCQo+/KvPd5FJhF9\r\nNLzTBWMoeScJjhjF2a87xWjoX114MKkO2uWUJ82usKCWixyaFbZYS4x63n7w\r\ni0YzoSJx0Zqbd0iwAx6gbGdFJ/7aPkLbwU8yGt4O9+X3wylEfSjBQlfgvsQo\r\nIz7qR2e+uhtzN/nrzDfnC0pKnlx3L+4vTtbRi7DbBBwxIzcaCgFjTwWWoG9I\r\nCE/CknUywcNGR6LtgKBiy4FWz28AT//S01qlWAEeqyPo4rOE9JVgqVZ1iw/c\r\nMLN0eJrxb0uW9nQhELfWoZiJKRelZ1NxH6TSe8iVu+rxWO2lX1MW3phP2Auo\r\nOxMmAyKt7XP66EWcKP+GaUNuine6YrelvyV1PRsYk0J49pYkzqrp7K5Dy8H9\r\n50ZIicj7N2rQns/2frhJfAhB/l42WmkhBae0qvme5vaiq5d5Glfy2ypju3no\r\nU4bXrokkKxBfAljAnM80+xkxj5IXDlW6qN1LJKOj9LCrMYfvW7x1dRuz31aa\r\nUiYKxQHwfkTbnLsAVgdMEXaLbRpM+7EXyQPoRIS7JhfxfotoLI/4hEQrpUuT\r\nU3Pz37AH1MnXrnf49LSiTaTSngyrNSZfbFI=\r\n=Udkg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2211111611.0_1668241570645_0.8313405904921387"},"_hasShrinkwrap":false},"1.2211151402.0":{"name":"@bentoproject/youtube","version":"1.2211151402.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211151402.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"db41c24bd071b6322e0a5188c4bd74aa94cb9d5f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2211151402.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-YzmmvX20mYbRb7rENP9BlM8DRE/IHyzZzivl2fEnMZ1CNGdZ1p1y/0e6YvVo6PAQQiLCSujBmhS1yw5/A/dVCA==","shasum":"2e921b5ced7f1edb92db93548a301a2f47d4de7f","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2211151402.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJn3eZOox3NPX5KJyOfTjrnjRGQVh4fvwf9QxwLz0UWQIgT8lnMIw1HwCYf5CnrCmzZadb7fvmY6sQgFu/IVxd5aY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdTB3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmprwg//WDerIS4+PVF7KsDe3o0nyFgIfelPA8+9uANzvi8olLrdonEq\r\n2CCHjjQTWqQM3TFFg5fzZOd9PP/m8/xvuwuAh3h9Yvv0AQrmUY+31/RLKjxy\r\n700aqOghcx+vuVkjCOfSdIPpYxCRL5/OHJaQfgDToiHuaLq+e2/I/ypAU6tj\r\nkthmKnQqZGLrejrwkVw3B4VfognGmY9WKwY0xAluHgjVYvstLE9L4GMGGiWp\r\n9VMeBfXPMAwg1kJ0NtPgBbfPfHRTrg9UEgRzB21+HMx5ceSQEGcoqPgImv2v\r\n3si8gvVzvMxraL480HBTQE9vHQonnDKsCLWV71GlklILzACE2B76glbc1tD0\r\nIf2BgzbMqgpqw0RzvxpA8aCkx8IV50ZV9L9TKqalvLrxM/pf1YMfIQRAdJ7w\r\nqjFdWYxoXJ7u7+vajnmWZOWqZqrAFTM/UyX9kSFQh1Ee0b/20yJT85LVBTM/\r\n6FHoD0HO9e1pr4bUgaQ+OKI0bebSp6HyrElzAQoOu/9h5FDpo8/zhkJsOuRM\r\n/APwsKQ0skG524daNMBP+S1j+V8GVVKG8ApBsgmK4GelYZo+l28EOT+E1xiL\r\nEGEh+k1r1T+EkGzx/35+jJ4wFNnPkXpO1XKtedBLPxNe+f/+iwzrroCSsLq7\r\nRv93whHro7CjQsYcNtrYGON0JMFBf6JXwro=\r\n=8Sx4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2211151402.0_1668624503442_0.45430747298781626"},"_hasShrinkwrap":false},"1.2211182146.0":{"name":"@bentoproject/youtube","version":"1.2211182146.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211182146.0"},"gitHead":"d5bdbc6c36475eb2c4c14f2b02a112669f244641","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2211182146.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-BenjzMsgXVPDRH1zUmZLUYMLXwgicHc8+KHFv+/ctvl9tETZCmq7mM/aJz/mg5xaxurhst6FLZoysq0k8Ziksg==","shasum":"bd3e0359758f2bcf88105a6abab14b1d16c373e2","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2211182146.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBO83XkgkIQAzCx2g3zWLNe5LAhISR27Dw0qdl5u+AnzAiEAzLHBgC/eHscQztDj5/gN6jnC1If/ejyayLeBtOda708="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJN+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8DhAAhg994uCXofMcaVAICBVqMDOV+/hHlKPlLRzMXiph6lnA8A9Y\r\nqTfjdQ/7+eW+3zUHp1Q/hF8eEftDXNcxHl3RlVU90K8W0muFQmGcbCGP0qgn\r\nJkuOoDuNvCpDAOvyYcDU0CQ8O5p3tUPgZlo6gmRT1bXEcG/qn1uPcokWNtjl\r\nxaWEKjaT/7JnO1PKq9SZm816MtyYYalxB9SPqQgx3QFywzXl8hLOhHaY+3O0\r\nioOxuodbc7tl1tqPTakiYdZfAOs7pLM443UhlS+HhBEhnvJyqMX+W8hqZooH\r\n0EfGwT64TlJEKgLfFcuDICAm3Kd6gQGZv2W/FwYtKEGidw++6uCyrQYMfNUr\r\nyQmUNqOo+yJK8vgWV1mCjl+/sc2rohIZma+9bKJhW0K3qcokyi13TbPE2L0+\r\ntGU3SvENbxt9G6SCBsCvrNXmuG928nDW6LP+BE/sNmIVRq21imy4oi/SLHRZ\r\nxOoIjeVRP4tkF8+gLYfvfzj3WmVc0CO4iURpL5GlOz87Mmr9MTpA1fNn2pjZ\r\nZg2mckIyeB8ICcNQXYswaxiya4/TH5E6w3ufzZJij1Za/vMwpMOJQqEdnIaP\r\n4MmlBFDtHzCnEdyvAdu0vn0Ms/z2Jq/BoRRWduzZWRa8+ePgMUy/49m6cSGW\r\nQnRKn59BidM7NxTARwAsTbN8bwNr9ShcrNM=\r\n=cfdV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2211182146.0_1668846462638_0.265253501338681"},"_hasShrinkwrap":false},"1.2211250451.0":{"name":"@bentoproject/youtube","version":"1.2211250451.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211250451.0"},"gitHead":"3f47d465c6e6f4ea83045b32b2c9f56eccb943e5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2211250451.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-UuARRcHfEwUCzgjfQx0uqVcAbXoHpgk7HyYPtoEKyjk8kLnXMksS4/is0fSgMFdiwDrbjP0/DhwU8+H0jUsWpw==","shasum":"317a18e76fbb3bc2ac92127a531c45f2e0a0fe75","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2211250451.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD82C7Otgl9u+E/b4QhK9Lpayw91dFM07RWLL/BZRsMGgIgTpsHkP/KX1K9G5Fgu9JnZXEOtQxLdR6XToEkgCqjf4I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjgHw+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoUw//ZEc5cBfR6QHLXU7DCcJsllj3jarQZPnvJqEi4UkhxnOT1VAQ\r\n/INvwfTYQ4QfHKqIfyAtgoNUkw+BrHa0RebHeu1uM+LiPcaF7gW32xs5V9gP\r\n2X0w6HpUXAyCkSdM1wl/pLcaDkGO7OOpybCUw4P3UJc89DkQFVFoSHRsnOil\r\nQeGRHwakT1+fCfYySR2fTNlc14qSmREpwrXPNp+IXuxmLXEIjuL+WbSLBNss\r\nmGQtZVY+KxTV9CIap9cAdddBUlAVtFnwHIpwCMLee+faeyvX8OjcXqMRXQmW\r\nDqNaf34bhp7jnm+G/KcPpayYQ1/oi8IE2YCb9QnYew4/iL48SdbYZOTB3vmp\r\nL6JeItYuF9vsAmPa4txZWOu1w9pga3CgeLLUTPzTRDljaBEcXRuHhTnTM8ay\r\nZayA3lAGgc5hPXJeRt5fTwEid+mannwNkPa/aOsQLPTL7f3lIEwhBgjN+C6L\r\nrhvIaq5kJcGwXsEUeofHH/w15/s//dlfaZKQV3EqHswLSr1DKOFfp/bSbyb/\r\noT3eHVbOaXQTVgd0uEGRYOBgM7YFzXVM4954etQ/RMqN2CrEw6QmzZEDp7f5\r\nhPLZ3wNckk/FF1sT/leZWDmtsy5f4gctod1/oXdIaFOOmIWf2LldUlRlISEU\r\nQfg9BeI66tTmbFEOL9aHHFXVZ+x8C2n4zc0=\r\n=dXvu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2211250451.0_1669364797729_0.9999959688788229"},"_hasShrinkwrap":false},"1.2211302304.0":{"name":"@bentoproject/youtube","version":"1.2211302304.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211302304.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"8ec16ecf1bb95c1a6368ab455a6cfc7b1caddc46","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2211302304.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Zu9G4eU9akIV1zbafz1viRVvzoCi3FHmpnoK7v300JY3U+9ZoJE4CGHRk0aLx0zyp/WcAP5vf/v3K1aZgTRXzA==","shasum":"5a709c3a08886ab5c8c4e9ebe9a9ad646eb9b299","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2211302304.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDS78j8uGkpYWXVMNugipTT0puq3WVak3nSLlSsQUuDeAiEA6C+K7GyNyIl4uT++rlEIiHP7tbO5OwiVSxjkYW4KLCs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiGU4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIhw//QcEbuElDej0HFD68kcH7Nu6jgBT60qvVLDSIxv5XITbmAoGO\r\n7U2kALPTMUPPos1gvIE6cTgPVlpAvBU+9oMwWMxyaZb26A3Yf3VQ8t96rz04\r\neaVahPc1htwyN7ka/ceKzfx5snI2j5VfcQUcXJDfnQixOm7rUCX3RjdMigIX\r\nHvFUVTP6Hz1huq4BOG8TggRrqbXdoBI4A+5mWoVwCJjuAoNOzhz7vuV88kvA\r\nRRuQ4HVvmzBx5K3jPgfSra+hPYE6i5qUtvF6efDAaOMNCUTUQPiHeHaCeLFD\r\nyrnzctF+JA0RRMbADLiy89mMhVB8tPFBrfh1vEiQexnSRkMBDkt84Q2KpU/k\r\nQnNp8P1mTDysfnTz9sC0cYVlp3IA3iB1akzq9bBzQpDcN7idv3gBYPSz2bUl\r\ncyhi8aCfgiPfbvvlfbX9MaJLHcONTCeZpfuAgPass/Gwuw2M1RWhZhBNwfDm\r\nJ0qdVxPSaC8ix4+0ocsBQBeDl9m0/kjrRERAkPbs4iMZpInH3ROQF/GCv3Zu\r\nZ6E5a721xJK+yoJfw/csX6vwA62b9+Z3k14XLyMYofyoclsyMu1Y8BAjXxq+\r\n1poBtnDYqB7WeuRIYuZy1//XJ7f2qaVo75iJJSxeRd1dVr9E0Q6DS3iTOzTR\r\n0m+vWQMQACsiko1JFT6HNsYfsX6rrU3dtVY=\r\n=xZof\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2211302304.0_1669883192555_0.9190552508570025"},"_hasShrinkwrap":false},"1.2212071834.0":{"name":"@bentoproject/youtube","version":"1.2212071834.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212071834.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"9e7a659da459058028a29b649ceae3a2dda7771b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2212071834.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-M3ZeN3rgIol4Y4+Ie02YUXX/zuY826VhlKxeFlk4/9v2/kX5DuGdO2QtJ9OLBxY6V3jt7YPOEMkwQl9Qk0X0ow==","shasum":"0ea5c8e1aa15209c6ffaa6e4817ba3ee38546dc5","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2212071834.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkbI+XCEvM39mK0AMuw8iLpv/B9rGPoDPdr6XjJbo/zwIhAIEaXih4VZ3uwKxWKAiMD5mLDUqeqfQf2cbPngEffmho"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkOw7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0CA//Qrp5KR5xSZSnfa/yzYUGkp+mOHKlJZqWokIL+EkuS1SnfFep\r\n9T8mNhud0XY+7FUT6O4t/YsJ91VecJRnN/m8Pi529twgzehA/8+z3Y+270x9\r\nnGnH+mVYsS2Sx57vHqiSt1E2qTAcU6bCbQYPcRqtUqgYqSwFdCmeu4HPv589\r\nXwRqsX/T2M9hxKObGBp+h1UJR+SeiEURvZkUc2b5KsNY19Z9yi02hegGZg+d\r\na3n8dm4nCaPgu/icJ3/oLFIM8D4FMlkWw18XdQGdwyO3tbCQvKZhXClUxBui\r\nycTpwSDeKmBhHfmfzgKP8tTEGzNA3eWRcs5/AHFbfJNyXqzw2dKfpU9s4C07\r\n8IOTodAwl5+Fod/ZdM4EP6nW+aYtFNvvPfPp/VVk8ewc2yTNmERBbpLmzCLd\r\nJWKL54Cb/OQOsjRHYY9h7IuJ2/JJoMegAgqzytBfsviK1SJM2TJMOgySueM4\r\nmxnro3h65ypwwVX6UBFEKEcBRgxVyXT1S1Xnnx6SLSHrWQIUXEqtdsa/DovI\r\njXakaJZaSOgrrALRoDDsrJ9iR8tkSlR2nIdnp6I8nmPuofLCweZjPBumH+Ik\r\nlX8I7tMRaGbUpDnXv7BkBGuj7RLc9Nz7+KuuvBCVHmoR+waGpcVD0j82BYU/\r\nX1tA13+zYc+++VTIkaaQhR8mN1HRilG6r1Y=\r\n=7dhf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2212071834.0_1670442042864_0.7358765003356453"},"_hasShrinkwrap":false},"1.2212092023.0":{"name":"@bentoproject/youtube","version":"1.2212092023.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212092023.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"16bff17f2a3e911f517c49d1fd2c74c8089e78e0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2212092023.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-BBFHg94oIFL1fn6eDccAMxiIqGd9L4RBMh7KrUuycb54qqMt4b7QcUS0BCdsTm9YNHEbK/L1pDncVPbCwHAhag==","shasum":"5e25dd5312eef433f654afd636b47334e721e670","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2212092023.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICgYATJdzd8iISGJIeqLY1X/3lBu7AcZUkEl4RHk1WnHAiEAzbSvGpCdoJuf5fR+Rwi2pItjdhxuwLpVRXJjx0zWcFA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjlELXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphNA/+Plo7M7gT5mby0lWfQAeXRkSj4+OGjkBkknzoGpzTtrZH6FoK\r\n2H9DXrU2135Y3fiTspa3ILoFUD5Mnh470v+5zLkjTp61QlboJUuLPbZj0vUh\r\nbGVRQ//RHdg6nYA2gb/UsWmYiUwlxw8IWAmgnwUN5YerfsSp9vAXTaByYtvC\r\n6GzSCqZRD1/hYFObuLzHiVRjvzPC2zwJs2ehsEVEg3meLh/Kg/FMGorHnvr9\r\n33YLBJkjVIStouIlXAgZZwjCM1lDRpDFAbYAV+H7+FdbJktVgqYL8bQWpXgl\r\nqvUVgO5O6lt4yc/zxUbDikW3flj0aCk0mBkR1a0XZTYMk2KjOBveFlIPsajh\r\n85K2VTQTuo/1/kT4KOfjspds/G/i1Q4EqamfJ/VNYoSUA+b2uaG6uwpjk+j+\r\nwwmTjVz7iGJuYUAMIHnfiCcVRCRf5977Z+Vjify8/IIvMdXHE1pl5N4LW7M8\r\nfVPSY9f2wgMt8wnyoEL/mmrY37wnsCNuyDo12Nf85uUmGbklASnOgBbVvyVk\r\njaQo3wy2sjz3xftn/MmS+baKERHHgIwF5EQAaM42ebMOyzpIoCDOhrS3pIUY\r\n8Om8nuVqkm1hTVq3xB2eTXgyVk3yNpu2v+aECq7ZxJ+5f+FG7WvXZuG9KjSZ\r\nQ/JcWvkWNi7/0q2ZLmRV9Q2nRC5Yh39UtT4=\r\n=jCR0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2212092023.0_1670660823111_0.834516559924926"},"_hasShrinkwrap":false},"1.2211302304.1":{"name":"@bentoproject/youtube","version":"1.2211302304.1","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211302304.1"},"gitHead":"16bff17f2a3e911f517c49d1fd2c74c8089e78e0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2211302304.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-C87+n7RwIVKXyrLNGj85WTPOW6aezjFxpIMUvWWCxxUWh7+SFZ/kO6oKqIsWbkedZb/IrjtUWZoBRpw40wWVEQ==","shasum":"7eddc227762198b6861478f4a5cdb59b08211d60","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2211302304.1.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID1AHHBJut7ifcqNjjB5bN3rEnzWhdLTXWGP7onDOhUpAiBseHKSuLTP76gJGJI+xV7RMTGj1IVeMoGlZ1Te1vl1ZQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPSwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFmQ//WJYCTUeQbGq8EoHylaJvVldyhyoD3UL9CrUDTio8+j0dD/kG\r\ndMp8xaU8+yT3wBJ6qRAT2fUdWH9wU9ZXetaeogdHaNR24NIOUVuTB/zEwU9S\r\nfB3cvWBP4nBpbIaMkeXRSOdgO0S1eTO5173259Dd5SBggGDC45a8n/4+fdjX\r\nufjy9boB7YByAYfR1QfMr+4M3gOXS8GYsQ4/zKiM76zVM6cHAGVBwgqU3F0+\r\n+/QrENa41SyharJAuNwgJec/iZilbx3E7rXGeRd5+LbohTZz5MJnm5cdwRx0\r\nnF0doHD/9On8zibt0tY8rmeeMxYprIjYkj95rXec6MSJLAms2Q+5H4orkfpM\r\nTv7DMXBMwk0/OnnUD1AiRmtoR7CXjb8cHDCNAE2IWhjt6kBTJxvYHbfKVmAr\r\nH4H7WS770t12m5szH91EdmqaMXGnV9x1GKbxGDSE+5KGj1H89fWsrIN43o5O\r\ndoXlYd3mjKLUJnCYL7YRtpxThFAUiVB3DdkzDaEJKEu778FbvSLqnC9c5hTa\r\n7+ie7eFkIv1nl3WLtFYlTQ0TtTVxnmpBfy2sE7420xF2CohaheHkpE1kBKuy\r\nRaVK6uLIh5fex+S46okqthrAcEfSJxDTZrAdDSbgTqsy/SVFsbfT46eMCp10\r\n5HOrbYiqLO6NwnR05qUVvOlm4Ozp0F488A4=\r\n=8BTP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2211302304.1_1670968495936_0.29597786941903004"},"_hasShrinkwrap":false},"1.2212151632.0":{"name":"@bentoproject/youtube","version":"1.2212151632.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"6754eb8b2feb7d6eadedb57776b91613ad5d6dcf","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2212151632.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-E7kJneqrgoOHItXiYItBIG48IbHQjZE4E1T8/Yi5nGHKnbiWTR664edT1rBkuJcZ6T6h7pvxp2wuz6d4juvu4g==","shasum":"37408fe0ee9098a2b327c75030c11da2e9fed93e","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2212151632.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/pYBw2DavRIQE2pPDLP3vTFdytN9ALs59WhrdZ2+JwAIhAOdUGFXWqGAWgZ4MzIcYD8nL3tMxbXBqzN9G3djacwCe"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjodquACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnRBAAhlxYVsYfw1p/Ayre5NoNYJj1aeA27fDnWoThRX04iVL2fYK4\r\n39owIv4fi1N0YK+SQa0P0h4VtVoaB7FtH25tpf2cTPyqaA7kzvNcl9QI7Gcv\r\nxG3YSHBfYbZDAl1M5HMy4hDxNKe30mHoRlR27erim4BMwnlv8/SmmXLuMNPl\r\ny8Cx7F3ac+LWOJj5aa2pBFBOLWzHHEhSgzoHduyDh4kUvnhgPxff+lAiyeen\r\nTSVxF7biu+mu07rK+yCw6MOWlK/jQOkP78UPIxxn/7pRp0zpttilgcbZp5QT\r\nYe8BM+ICUV/JolOZVXjj3/7w29bPAqkT7nF5tzO473o55rJPAJFDUO+brj43\r\nL/j/YF7aNUslfyktBD+NmqhEqp++gh7vzPaPdGpY6Lpfn/vSFcNtq/yC/fn5\r\nu1Z7QO9W/Y3/0X/d4rxLY5ZwKxi6DmHvHdJQ9LjJ7VeoltFs2lpj4NDWau07\r\nYuRAdLx4yEsPkcIt7LMiQi8lLJihIeDFhrCNBuX4FZs7pmEmoG1DYRZjirRi\r\n1g5+MgKeO1JyRzFHvArgpNfDuA6zZ1Cj6pSVUkhAipOZndfpBieqzzHLG4oq\r\nlV96Lys6po8LOLYcY1FzIjM/cpRUBH38dmEIRvkPjK9hhr4CXTvIfF9Vk5r+\r\nDlCO0OMt2Z4I37oe+0mfsrUkqpqot4eSbH0=\r\n=grBs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2212151632.0_1671551662299_0.6858571795098369"},"_hasShrinkwrap":false},"1.2212151632.1":{"name":"@bentoproject/youtube","version":"1.2212151632.1","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.1"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"0daa515ff1e284cb2e31dc8fda7f29c073e60b60","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2212151632.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-BuDbXR8XAXmwKBvdJnrfzGswO/EBYjituiIvrM0lgX9pNKJaFitShUoL6T9OgCE3FKORvMUcRH4z2XZnLgBYEQ==","shasum":"a03f6b0d632f1411f8ca7dfdf8209b78365aafb5","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2212151632.1.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGySxpVpgkFDDCSu2W6u8WPZRxiLeTUrMyHedV7fUkBwIhAPG/u12FSCc3b5RCjXfrmjr0TRaufIqwQqvAAlLZ44u7"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjohcDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9gw/8DDjMtO+QskdnkM37fml/fdb0IKv3HpUUV1gjmhc/rBliMS3G\r\nMcjJmwV+NvQf91j0/ip77triGX3fg8pwzWOv+6OZgejsoAmpTD5v9bw9Xg1e\r\n1ogqB+wt2Q2IdWQzQQhpqCGeMds54gEdUJ2VBtIZPz7Zk04udEaRQS9oF+rr\r\ni151fanmKj0uTEGOUCfpvQmr76RrEaT2fZxxQUF/6tzIAXS09xGuj65Z4N1W\r\njMkB/J2H3L8okRSujDVtaIcBiRp8vs+4DZAqlQv7cnTpZITRXv0703NkWh5r\r\nyxDtAR+6cFC+VlQP58kNt6SIoagX6oTdkuVaXfNmY4A2+1kb9jT1o00K55FA\r\nW7K7ann2sUwNvzunLwTs0O6cmEZO0mHBQYNZiOUCj1yVbYUDUScqvHgU7KmD\r\ngbtBClx2xhSljFEg278by0raiLElS8XR7NI3nmlAAJcP0tJd5x2hY4aI/1KR\r\nSmmlm02s85c5un3I7yNuEjsI5nULSfarGn/H9qEVOm9+80CmA2U6PILT0wqh\r\ndDSY5p1TwlzXYtHZzgPmhga59fcSfzW2uvbXMVbaCAv4jJySBdbfSKhjdkPE\r\nJT/oZjJb5N1VEc9NWsOap6pFnlQcTV9SAudMQZzMyizlNYbB4Mq1erRlH187\r\nWCrl/WW+PVkby2DlPlKCL7aBxbDXtoM6qoc=\r\n=E5pA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2212151632.1_1671567106810_0.14576658846668544"},"_hasShrinkwrap":false},"1.2211302304.2":{"name":"@bentoproject/youtube","version":"1.2211302304.2","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211302304.2"},"gitHead":"910a4ee7a16075d9db8fd2c6c5bfb607f22bf54f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2211302304.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-bgf/AaewRZOwiLvH2Y2QlgfEWD2HWSgDIV513KjumYdYLDZ4WyyV4cHZML251TKM4BZHcuxZGSBMLAyttsIJDw==","shasum":"bbf018ec2934750d5ca2af3f673f209a9df74f68","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2211302304.2.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHzDMt84jHp49xqeJfV5a2EiRIjro9duXKUATVUWvlvRAiEAzuD57Lw4kxtXHsxEB/grhPut0W1gkYFLgmjRK913V2Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjojh3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVbxAAhmTdUnQiY0SIrc1fEYBF5sJ7fq99K8ECBg4Ay3S8WgaugxYG\r\nJl8q/De3rHiaE0pT3UTWIYdjqdw2GGlae+/iOkgInT8d/dZ5TFJVs8BUKQuW\r\nzgguEaBSae0bPTPKb2O14SD/RlJ81VDVkm8YDuBxOW22vmgHQDYbKV/q07Yo\r\nyRL5ln0GIcuPoOdqF49twHpWPMv4umZqBTfsrokIH8nDJP69Ng3Mt14BBeAK\r\nrugcMD4RFg4dqs+IC/SGgPNn/QZwMCG9Yi5lruLZzbJ1J4tdJYs+NH21PF7N\r\nNgpseHjXLBZPLKjd2m2ARg6foWw8GgKiukbaJrteQm2qc8Tit++7xJoY4kap\r\nUJBNNr17nYIONQO6097Lu7nrpLl9soApNFYLiVRPSqI2k/Yi3sMSsaidH3pB\r\nSGyvPg/szO3KpAhLH/Y4uIQ+/bmh0Cy5lT6UrKACU0VlRJyVNgKvTB2B784K\r\n3A19hjmbuVGL4br/7RXofya/DlrsuuZtUJJjuy0DHDBc4qhNdcdSW1+rsw7G\r\nurK2HipPYmfV9QM83Lvg7fomaFh5+53Lj6U2QAomDHB/kAJTDnfEOgDH2LnR\r\nymVdVKr6LzZ2mx8oHi+DqmVRhST/8/d3PQMwXdRt7QfEmtvmrdgmbxHYBt7j\r\nT/HH2GDKko4vJqj7E5ZfY9OURooY95VlpZE=\r\n=mbJh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2211302304.2_1671575670889_0.39041046500223886"},"_hasShrinkwrap":false},"1.2212151632.2":{"name":"@bentoproject/youtube","version":"1.2212151632.2","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.2"},"gitHead":"e3ba25e45c2728fd6b1c91daacfcf7d0870ba6e9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2212151632.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-guTluz9di2/rwSYV95IV6R0y6W49HcmnHC9GGf6bWEKPNmZHRdbkRfNACTTnc44TBAPTw19kW9U16owwyhhVog==","shasum":"d11e7156d7497f75c599f6c449a396b413ce2b94","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2212151632.2.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVDe2kbMKwszvxo191Ew0jhn/oY5FBAmbHR6bXKh5DeAIhAP+aWTDO9JVZInWY5A0IbHKheMp+NeDfLLwH3CSTWfYc"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtHBeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8Ww/7Bf4gtgDDnAsuYTcdny/5k4Qchgd0iDX6bSxWjAbXHeUOlkxz\r\nXN0bE/jUeNV9CxfcZrR6JW78UY3XF4wxnV4X0PF3I4e95s+kP9kQg5qO2Rmy\r\nb2etWxTEKvr/AIBsrOoVS25eVoOTs9JhnbzHxmUfkBK2nJXTsbZ/IBXq110V\r\nTEyQXwDGVrn4v6TfXpnAt+9Aq8WNCN0gkBly5alvDvQmaHI3YltCVeABy19P\r\nMMzzyvvgiEpuX9JOsVoRaBnYbRfT8C0rKxh7y3t+aawKLhWKeEEytqi/LCgy\r\ntVMb0PtGvxZNTUi/sqm8MXKiMV5tgVVj7e4Spvzskx3g/0buql1rSRo50BSN\r\nIK9RDs+FLVTwRdV1OrwugC2ZLlm5bUeeqy273JAu2xh1Z2Uy6MiamUwe4je+\r\nzjEFkh/XptNCb1xMHJ/6c33RtxaCpCxTXOmR06RZQxBuxt+AgBDFgLWKJMes\r\n5zjTnjq9Y57tzgNBnOqUEmzxpXkOSh+aYmdvjzfoNNr3de26lwEe72on2txx\r\nGRxXX/jT5hbtrSETgV8RS/GFpSVFcXe5fB04xFOwhmay0WuGlrTscI3D/cBL\r\n+Li6kpukrBtCF+vAokJKpX2gzgUCntalOKd6EMnBwIR8xsQhsAGCn1jwUtng\r\ncDXmA/m28d0UoJGDT1XKF35X2mhus7tJQ9c=\r\n=Rasb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2212151632.2_1672769630553_0.11099505673057042"},"_hasShrinkwrap":false},"1.2301031703.0":{"name":"@bentoproject/youtube","version":"1.2301031703.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301031703.0"},"gitHead":"e3ba25e45c2728fd6b1c91daacfcf7d0870ba6e9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2301031703.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Tr1T0r89GKmE7wtUGp5oO131xsVjTcGoRX/onU2U/vMovfhBC1BaajzNxilnXJug13lbCXrOUYVNmOk1g+IcLA==","shasum":"db8969406e538781c4e992774bcf62868ee47a1e","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2301031703.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBGp7TIY/9KOQESBA6NRXQ9UaWzmP4dvlzpEZWfBS0EvAiEAkVqI4/cB0YWoVa+stX7LdImgMqhWRfzT/9IKBh1Wte4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtJDaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmol6A/+Pnbw+Ddld40ni6PNYihfgiajJEXBDJ0flaRTdSkfP+CRyspm\r\nJt4JfyZbAQGmgNhvEa9OKESE9E2t6V3cATS9btdkMmSi2iwTg1slNS8NMAA3\r\nT+ET4yI1X1F5kX32FrQeX0FGJGENafi30T8QdAFaXeJaiFA4LQ5yfSIqyWI+\r\nBclc3sJMlhoDJRdCMAzJ07vo8NnBPfVDEwc2Lkzkq75/ZTpNS2piZCW+LfBD\r\n/XqEiLKlDchEC1Q2nac4Io0Rs2rmyiRMWqPYllwGWmXzjtxh8TtXKb7o20e+\r\nc/HXGq4ekT/xHRAuKvms8YtjegI4cJXom+wwmVRFVpkOXYAZmnAGdX0jPefO\r\neCWATT6pUti2FnFHJ1Y3u1U4uu/DsfxOaXl/uFG2Tc/MVviyFxbSS7da9Epc\r\nFqHHRY00dE1skm3nqWvExjU0rKO1b4OsHTNasETiIbxuCcyK/byNlANb6Yzr\r\nV7AtGtfRnXPXGi6cNxXQDaTyg87vikmS9vvNchrGh66WYJAHLPdXlQdVGDa+\r\nXlgQLfes+cF2r+wrQ6+YzpLQ8gVUeQDbsRcndCpttXudQJqZnRIMiT5nmTC2\r\nFbOj8EfDAW4OjvBb0l74w2CyAEdWSg9i9POvlZL8G0N28gUQAP1ZbLvTWXwk\r\nG4tpn/tWeYNThbWjlACMxIV5VZuzkVJY+Pg=\r\n=iguj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2301031703.0_1672777945967_0.7890592547455575"},"_hasShrinkwrap":false},"1.2301032153.0":{"name":"@bentoproject/youtube","version":"1.2301032153.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301032153.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"418b16026c82f72bf8e885668d34a40fe043c9b7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2301032153.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-I98JJp/xFYNH1pPRA04+JX5LKtmSC0B5+FXvpzxUtJbhh/FCTNczIEuYHQbJ0xYTjmElsdM65ThrHAY11eJHFQ==","shasum":"c117124488c730676af0cac44beac24bbfde2d3b","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2301032153.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWaCCUh2Vjyuf2VYM5y96b+GUS+6R5Gh3/HnTm/3c6gwIgFPMhc41lbosWq4jAjQXj3tdOZE2H1q36tquEfpzokvc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtThuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7YxAAm+NDHnLn6wICtqjBSyBpmDaFqiQrrscvqgV8xTaE+2EK6Dox\r\nlhmorskrSBf072XcWNNUG3VBr6wiI4J9jDKO0dJetORb1j7tf8TW0/LDLdMV\r\nevT1kjSbjiB+Z8mdF4NF+NGUPayJkjwg83uB0g6QKkGp4I2zas8fv0VfoPCl\r\nHyCnORI6EESgqSBWbeh+zsnGDIQDSfhUs1eITvmQUCZJ3NXV+3O3DMxYl1w8\r\nDxzPphQjkbJL2HdXVSeQ0TgprOte9tQjhFIlaC5UmoarCJQbvwSUrYuNIRzN\r\n4UQKiTyFI8uT4xRfrL8RshrbEY45Y4EPSM0mCWaXHfIqG0b+HkMZuRVjf/An\r\n0UvR6WnNA72P1RFz3FbENw0mjG9HhMhhuBuBmVnH+xC/fV1vZPM3yR2ZNG+H\r\nnE8w2eydvc4Me1LiaDHH/hC5Vdm2/kd/e60xViJ4VW4lzeSIYRp5Di/NYDfe\r\nJEdwdOvEIUmgZgZ4fE53j+rhGLhkdCsX0pZyfL0KDo2XtV+NMkgU21em4nTm\r\nqLnjjq9zLXE9CyORb/L8IOml+YhpPcFIbcDoOcJZ/7GVefobwfXtrbwx0xKe\r\nk45xRZJXC9+jeCEC/3/xHmq3GPMnGSeAt8fc9glP5dVBp1+sg0WxYa/wP9+R\r\nfX+KQchJq4B+VUKItMNTdJZwuHM/ZJYY0ag=\r\n=6/2/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2301032153.0_1672820846712_0.22462008347370976"},"_hasShrinkwrap":false},"1.2301041800.0":{"name":"@bentoproject/youtube","version":"1.2301041800.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301041800.0"},"gitHead":"7026aa71b81896aaf30f29b822e1a578138e33e2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2301041800.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-+ZWE6X0dwpU+BYgPl2lzLmWhe8Kf36NfpIOxe92XVUiMhi6E2RseZC8R8lTd5NvQOrdI7oriH0TqT5IK2y9qQQ==","shasum":"3565a3e011d5d59e539d60094a92ce603850fd75","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2301041800.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4rqcyGhQhc2ZpWVtjcH6UCtZrwUXE4OpvxjhpQzKm3AIgIpQ/qvl855ZTc05eB6F1sr+wms6IhZ7yDa/fux4tWWk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtooEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4ng//XHTX2SQBmygr2HjltGOm8hIQ+sLj7Lu88oB9Lko/n2LIGWwF\r\niub1PhtQmngDBGGozmUIkHcm9pm/ShALSkCoHTrbPEBrZsmeeoNGaHdSSZ+o\r\nNa2tCMJFI6Dfti0t67kjr0vbQBTOKnjHNVtK40NRzopTnVVon6S/wMF0sGoG\r\nHEfWzYWbTPggKfnamej9AitzRtWLm2sFkYvB/9dtgnvhOUjAQnNDHk3ZNaLg\r\n9VswQ4pExH5CNjhFJEN6MBv5Q1JejAvWB/cl7lOAY8HRScXhMbo8EV9GXX3U\r\nQFI8ox0xgHYANBcn1gqDWE12Ov89oOBcvyyFI/s6LE+dmNgGyst46MezaS+9\r\nqnT0mMjwnDstK9yHCw8KZsWsb4DQypRzsjEOQtBFD2sJRY8fIY6z/joEfD12\r\nHpd8nNZluw5P/CTcxSyykbw/yCujS+UYOpGzZNfUE+sKHJhzCK2IufJxJJvk\r\naJ02T1ZXUV5kignKUv+xnBCBpC8Or/zEVr6CsrR6A05v4muAy8vCMOAmo/Tb\r\nRmpDKFscHKjD25XJ8ypm+G1NVm6bVsmjxoDuh0QoSbeSAwH5nfXyGf9ZveHV\r\ncIbLPA3YXGoY91oktAe5TEu9eRvjjUpwaSe3GEtosrVGL3eJYS5CEkRwHfa6\r\nN34BMLAvifywe1ruBDyjxCb//u4IEfuOdaI=\r\n=LCWF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2301041800.0_1672907268215_0.019683335011001724"},"_hasShrinkwrap":false},"1.2301100345.0":{"name":"@bentoproject/youtube","version":"1.2301100345.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301100345.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"12a8a2eb9a3656064439da35b736023090e7c78a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2301100345.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-4gFw0106+fQOhiDGWLRsz8fL1IJLpJM1/F9tmAvFC/9xAX/PFe2SetajBvoZAU1uSVELBUCKStO6GpgZqZ8TwA==","shasum":"be20216a399cdd9387fc7f53c86d0ec0194ddf59","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2301100345.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEbIeuG3r4DIn0pZaUQtZNJchmJlvEHP0FdGUJp0MTGAIgCqVhevk2JRLpJ1pnrzoQDcXYr5XMMsG6nuccM3mppRA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvSGPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFyQ//Rk7v1ugBRdqfBfue3pw3wR+vgzGhTmneUzthP10pQpVlAHVp\r\nlRQjJGl1ptur8T4ZO16dKXD6UD2ibdFp5TFv2iTZOJHziRCRoenXp44pf7/C\r\nui0PiObODHwby51aXBtWD9byMut/J8E/f0b5zYnLuZTn9+QAZpYnIo7VE8EN\r\ndvRY/Ha3R3I71CrY5GfE5pFbRJ8fDyxl2DxCDlalc/cNkm6md3x4uEy2gdTW\r\neutbuyvw90x3ifVP6bMCwkazIWw0WtGK62MJCQNf1zkByfoSAin7aP4MkIDl\r\ntVrA6Z5EkHpwQx0P1imTnXv8fNStnegQm3OaGk7+u66RgGyibs/mpeUE36cS\r\nedc7ISrYXmo5DBeW+a0sMALKNuLkTsR73J2irW5Sg9N6d/tnfxfok4gpIhZ1\r\nKaEabH67lGmJCN2SEddrXMeZ/MbJAr/alCYUUhIQI1uZgzGycCCh+AB7aXbU\r\n+RdQeJYHFITgdFlK1a60D+DyCyzL4254aVc37azhtOX2BzvEELAY0yglAhs+\r\nXN1zwzu1gYnZZMKdko/t7lk3tinn+uQMJTP+BsG6M54NHurfwSxvXmlVJ1iD\r\n1tXpA+y2MhcoqWa9nLHcOMQ8TO0H8S3hX/qxMvwsD5IE0YkBk1A7vqLb8UiN\r\ndoJMmYuSQwt/VJuC3B2IsyEFhpf3nvapv9k=\r\n=l8tM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2301100345.0_1673339279269_0.34812586900242737"},"_hasShrinkwrap":false},"1.2301112346.0":{"name":"@bentoproject/youtube","version":"1.2301112346.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301112346.0"},"gitHead":"290809452fa1006da1ea148fc925beb127bc65a4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2301112346.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-NjyGnFWGY+covevvJ3cJUJFlW8e66tV3QNRMRDh/1vObE5vOnXy9x8GEmxPKZIeEtNG6lwAZgcs6ohXUOei89w==","shasum":"0d2f31b60ff7211bdac811f5e4bbc31d40b3f739","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2301112346.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDB4siu0zSlbX2yLErSb4LI3vk3a8sRTlAfhCBXBLrG3QIgTcxIULO07ThIoZkVWQ1fq9e/6YVUsuRGtpAnGQ2eidE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjv8TrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5bg//WoZKD0q6ext6XI/WmMjvbWk8kCgXEHopsG/iXn8wSJEsSRnA\r\n+dMmkw2e8JsM7aRi67lZh6075I4XNAoW4+tjhIBAVb9wrDD4SyYOGD420fkD\r\nQGbdaA5gThmejHflUpFCQzXBcWR8i4xMTR5CexKRxe08ODGlEGyvGjUtCrYq\r\nRzLgFXk4QXFDfvzABLmo8A4fRn56Elka2YBk2ZR+x8pYZqydsfOaujZCknMJ\r\nmvlJ2KeO2HF4lBDid/6VARUa1u7IMDLA+wZ12rFq1rWmvRBAue54fKKDmvF6\r\ntoeUGT9XY1ytXCb+kLCT4XqDnZvYQnEuuirX3Q7j8+nlQyGhdi7pFGL8/mG/\r\nyfr/jEs5VgTs+QjhuXyRjn2/DFUMYise3sMcL9bOt/d8oZRh0ipT54Fnqz/F\r\n/I21zhOcLIn/4HAuq/tWEwVMfnTQ4RXW11QliF0xh5t1Dqtn87WHhEeGBL5E\r\nygiSdh0ZOxCIli61QwiGwCFF9KU1/exdYz17fMYVZQHzZXvwvP/BOZvUdDd1\r\nO29gqvPyeEqH7WnCBUB9kERY+xBOQBJ8ZEvBfvPeNqdqwcbVeDutgNsrC/5V\r\ni+mPK6+pb4F2xSz5E5H1kU+m6E1SGDd7dummrFrJ71rXmdlRVYY69tuRKb/l\r\nUjiMm5854W1gdIv5AXAZeL0pjoCDQD8s2Fk=\r\n=evMK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2301112346.0_1673512171214_0.31959813462713904"},"_hasShrinkwrap":false},"1.2301181928.0":{"name":"@bentoproject/youtube","version":"1.2301181928.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301181928.0"},"gitHead":"8d4b04c8f4aed6f3fb83e6cdd785a334ecaa8a4f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2301181928.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-JadvJkp+pk5oJUiGG4/aVWsC6NFTBMZAWvND1YRRDt5T3RQnREBLYAULAm2sYtWZv1wTmWGqn8lWhUgs9siUzQ==","shasum":"dca140d2808781f534206e9df9cb515ba0f4b237","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2301181928.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICkFc3oTrKXopg76BuurFSdJXai98NmYoyhpPaUeB3plAiAh4ep1R8ry5zSGW9WIESKFIQesX4H8yI74g4edGIMS8Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyP8jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiyxAAnOV4R6EtMQS+IyXS9LlxBx7sfxm0BIHj5GAuOKuPDClZnIe6\r\nyAdo8HNVUKODS2G9Q+fTcLrl+QTe1jPqv6CIMx3DDfIjGprnJUIY9O4Fv4jc\r\nUWw5iA2hlFPXsR9SeWJqTle4bwvEEFoe2cX602g5v51kXKXA2Pv2dwz47vgc\r\nMXzOAgk5l7+/HhQS24HDWrSbq83Ly/XMIXY/4YLdLx4/rDLbxsGNnXPNI/Zq\r\ngbr+TgW3drMhbG5BKOsP2yV6oUaizDsQvumjENq3DNX3ulKiUSL5dA89zr9Q\r\nas2FzHaXqGdz7V7W/YymSZFifTkxlMu//h0bsTssLPxRENgDC9Iyjef3qmPg\r\n8F17mcPr+vhAmoJKXuK3Vkb6KU1pDyuHIkDgS31iS6/fuhmh1Vc4YK0T9bPj\r\nfF8Y8HKIvbLs9U0lZg5/jxDlaNIMck+o3yBn1SDCqSpXhusZmN4yvGgaJYUj\r\nLvjsNiDY2fytkzXVIrtzs8CVPc/7HdvswxzwHXWSteNs/E4fgTO8o6OTAj+u\r\nkEVfuSPHjwUa06wz+xFDlBOF/w+/83QiIyp3j5xVIYfRjYeEil64qyaP0veT\r\nXkF1lOwF6l517q36x8Qx5tfKb2n3H4CYpjL+1YNMb51eqyD5+K3abXA+zFkN\r\n5IVbSlRPIjxzeYP7bJzwA2g6nx1e63lsO5Y=\r\n=ahAt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2301181928.0_1674116899046_0.7718498310199262"},"_hasShrinkwrap":false},"1.2301261900.0":{"name":"@bentoproject/youtube","version":"1.2301261900.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301261900.0"},"gitHead":"a6ea9dbc37fe6d4b0f68e25838c857835dd4f7e7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2301261900.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-FT+ECb7ii8h180w6TK+coZcRXgc6iQpuR26lNwSipUn9L0LHOZ+y2BSYZl2PIZ4WiTR+njZSgoXVnuhxqYlLaA==","shasum":"8e72991530391be92d0117a775567ac37c659157","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2301261900.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBZfbsdoQsLKyl+XplkapqlFOmW43zqrb5Ab9UNncUrdAiEAokJhZg3bdr3GD+qwzhmPmVL922WRWdLVZ4eXFAynEeI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj04tJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroLhAAkSoeV9oiN5zx1JfD8tJj8niBiJrsACJmWlijbumm8BGLp0om\r\nbTJ5075+bHgTA8hucQGj6GpkptCH2/ZIZIOL5iOHlY9E7d9EL95psX/4qwLF\r\ngloMy9jHcM2C0nfYx8xWno0l0p5s/ZoQ+2gC2Vx44ieS++Sxfk2OSGjnA/2X\r\ntdasynBKPSQd1BkCbVhgundpMeQ2WG/ANO62gU2mbBMKz27RTbkUnMTZWu+Q\r\nyJ2+kHV/zgtWlh2fOg6TDu5cRCtkmwbWJ14l+7eD8MSGDdEDdGn6rKQy/jJa\r\niKNGh9amn4v46MzX3uQeKAPnQl9GV0NbTlJaVFdKhRjLGTKhS7BfKCpvkBUK\r\nETD8dZp4kL1/aXC4K1cMjPMlLsVdV+GFHZCEJ/U863ETq6McwS5jkAdXIOOO\r\n3Uy7zI1tzXw5oP3EcQScr4W4Tc+KxGidkOxwVpLco6UIiD/XzCob+BUwrqvk\r\n+GWZRmu11aQxURHVQPBIKsinRh0NqiQkAGxBQJ+zA/0tj6m4VI4KJvgiGLzz\r\ng3WkEG1pBXaU9c4AtOp4wqSvGTwMTO/pA+YbLukm4Fs+3Yu9rWsfqml4La3Q\r\nsv74vHtD1bYdHmKqAHPzP1aPK1fSS/bd6Cl21cYWVzYOREyI/NDYPpdnMOvb\r\nTIVgCliLYr8XMkZcjTkwDaELfu/QNFc613E=\r\n=Z26x\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2301261900.0_1674808137781_0.43214832840578254"},"_hasShrinkwrap":false},"1.2301301810.0":{"name":"@bentoproject/youtube","version":"1.2301301810.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301301810.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"06d7a2baddf76737d7cde110a7b4bb9351feb38d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2301301810.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-mJUWOyh8pKGcvVOD3+xhDLHA25YTsFyQf9aDH15xzrTJkXtonmN25W95d0Zd7OnRCKmHJmOKtKylVAajuE6mQA==","shasum":"91af41aecffd5faaaef197a76e8886f7f999cef3","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2301301810.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGfRtbIjXRvYwVDeNSF7BBfRr5FQYy48pTLamfH7kjOQIhAOxYaW+Hx2Zg6L/alO7nhC3sokmagzXjm9a0BnXdNA8r"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2NESACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtKg//aUwvNxBB/nhp4co1UPzPP5+VLO+dyNSF4MBvl1hzx/DVoB+2\r\ndf3pFxpfqTbc1/RM5ZW3eCT/KD3xKeRqr9cookkKRBz3NiMuPNQjuXE4ewaz\r\nXEqu4dB55UWRF3jd1wT7QPCbqVhnIuoz4dCITGoLIamsF7uoEXjUgzDGemeH\r\nqzRsRzXnEEVZqYZqH7o0m4stU7C0tbcingHZm+rdownzqgHv9/F9Jufd8EKq\r\nisqdRRW/7doQVHC1FlfHCy6Vi5sR727uEeSS6MN7c2ofvmUdrzdiLKoTYniT\r\nnrX88aQ9ru6KXrX5C04R1q+ujmMXZ1Z4KLod5HAvpe2kULJlUA+L4IcmOm6r\r\nKJ2pJMWeLJuf7xWEQh4d3IfIrbmisAn0+PmwEgA111AReiKgGLo/ltq6eWCf\r\neKi7AiOc3GkMVx4m/uykSjo3oNA0/uFz/NrDAqWi9FQmLx05/7BFNZB5wptn\r\npNOo8dTzwFYNtHcHSn+dlnKP14FWpvYTdX9W5C2OrU9Pvy6iEXeF2e2y8r/M\r\nAWCUJy9NbhlwAYLynjLAfs0tjttvDW0HHJPEi4vXqXBbonEqXj4Nlf4ymuP2\r\nVytCiTNvLYHHU9b9MUnSIUstVVQYVVkKG+Vncga9V8Lu7rKjDrRNnIb1UzTT\r\nqUMniLKbVm05vip9LmbyZ2AU3uH9A5GwS6c=\r\n=hMVS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2301301810.0_1675153682347_0.1881658200379479"},"_hasShrinkwrap":false},"1.2302012254.0":{"name":"@bentoproject/youtube","version":"1.2302012254.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302012254.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"e4c14ac075b71415995f07a6bcc3ca93a8af5cc0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2302012254.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-0o35J1a4wJFQZftGF1nXNo7zzwT7uZ2DNNueySuCecMLlLw+M0XYCRLbsh2hYzuIibGon3VaK/ItIyAX1AYT+w==","shasum":"a304099abceb7ab9d4c5062a1ff92c81cb2246e5","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2302012254.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQ3fAePQKz/RaMwB48JbUxwrC/poceeL6P2fMh5SUrZAiEArgLo3i+qbeWv5dfVthBUbPTXeKI2w8VcShi33tr9Tco="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj23PrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpFQ//XXHxMLb+3JYMMZWkSIoa+aGubOqtxqvlZFRhG/ffiActbrJm\r\nZRbFYUmQ+BJ+geWPp5zPjfFCV+kbjjrFWZnBnHKsJo00BSqmkkAQPrxKU2Dw\r\nuaMmE5hrC8zJolH5KOUD+Yhd/f356xNIMCgz0fxoHCTucLGbqFGofy5u2YUB\r\nMhiuuxTxyE4QBPaPeJu3/l94J3YpSxZLwUh0AJWCcehfXTN0yr/VLkKkD4CE\r\nG7iwR3nXLm5NHkCiNoItbpd+aeW/Xvkzm1HV6AWzqPdIYg0n7yn0GXJoTnQw\r\noCvBRzX2n83jQDdHYnTdl16kEcBp+PF9g4oyEjGwHLRBExLg1GOs4CQDwNKy\r\nfMh2yYJ9uiHkgc/FVpYl7/eGye354xqHApumYT6LTL9wej64+swWuaUI+d/P\r\noFq20e13ZqKTq/gXWm3KqX77fAbU2yuj9GqbLr/Bj/bSSqA0/foIXWS5OTmB\r\ntjJKuQ4brjn5CBBpTEgR2P0M/pZhK0tkP3jmxKJAeXmg1vPO/m3AopdjruJ+\r\nj+lyfwOemm2oorZ3KtkeuSxFpLf/keRE814A7gmtjz7JEiyb6aQQy3tv7Zhz\r\ntMnFWrvDU/ZjEsx1MUVMnJ8VGOhrAt9SDJQbgNFdS83SWCsVDOP4equeQSeI\r\neLARe1TQFc3th+Asj1XwLOmMwa9fPRJE9v8=\r\n=4uW/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2302012254.0_1675326443276_0.46595709396504925"},"_hasShrinkwrap":false},"1.2302021743.0":{"name":"@bentoproject/youtube","version":"1.2302021743.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302021743.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"a27cd72c15b628053806c94efc4c96730603dbd5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2302021743.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-cL05gdrVVYNo88zn8M/GIfA9lrHnW3M2Kqb3P8QLRzQ5x+RkX/zxcwUgmqbynILplxQ3yZMHZpFvJ6ZsN/+XNA==","shasum":"10b29ad398ecd9d5a3a439c3b28e8c9d6bfa8cb2","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2302021743.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDgNmBFohvxdvDa0OIWwBRHeQVcSy/zwmW+j3tQIpovuAiB+3LsCYXNegouefJj0FmWEahrkNKSgfRr0t+gAU2VZsg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3MW8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8jBAAkA/qY4x9d2k/a3AdvidJtYD7xlajMP16UEeND67SU+s92E/z\r\nfh/puoXx9Xz4CntGO0kps2iZpS6SYY5eCj8Bf3XJOnH1H1NYMKWozJU6FYJF\r\nNvgzmvaX1jIxO0IkOPcrtc4UH6hV0ARxrFLf99LSechh9LidireWHs+PkS30\r\ng1P+67NEugmwIfOf6SZtZ1bzutv20L2MJTJSRDViKiHNjyzpP+wIZkAqod6X\r\nnWOBrguyOzZiWb1426b0CbwaGAl5Bw25YLz36jDL8I7aiXzyZdrQ1qMqe94I\r\nbqOMJhoPT8hKxI/jcSax8VdfIB4ohHu65ieB8vmiKkhjyeXwZU0upQcO4Lk1\r\nimcVmM09h1OtjRp7mWYBNat92C2GQK0krKhJRzArhiLhElfD9nuYoDOM3oD6\r\njnYuNo70jsZkbCr5HvWbo2KBF62jnL/FHW8AD2ju6Sv/IAKdF3NBDSIbqSbI\r\nbEs4DGfmYPn/dvLtAxEcniv8YoDknM5lHn2JXVMOATUwLT+dFAD7ejsbuAOs\r\nh8BQf9D+DN0TgU0bA4d76bwhBkdpUodOebVIIyp5gsHR27+m16IAopDdKznX\r\nGXEp+rwGJrGll/93IpTKy7qi0BNmRetlofgp57I9zwpgFOSFbQ+OBD+4hEEk\r\nT0mh3oa1CVlCnk6mvY4zczcJZ5uzngREuyE=\r\n=Z21/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2302021743.0_1675412924077_0.4068600870836141"},"_hasShrinkwrap":false},"1.2302031721.0":{"name":"@bentoproject/youtube","version":"1.2302031721.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302031721.0"},"gitHead":"f8cbfb0c4e4db6b8dea923c0afdf75aa7888e4b8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2302031721.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-TtsZT540av386mX6gjuNTi8WsQPRgZ+kgExY+3cIg1iUW7U+s4f/O46gR01dqXAp0grtS2N8+jNJD8xZ5sHMwg==","shasum":"81389a3354dd074a4b327a49ca253c46bdcecb9a","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2302031721.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDHjU1HQHn3HeLsfoLzf+l91oyqAsteM9A1Gu95IMTCwAiAB9GgZzFdunsoAQUc/hmz8K4YM1Nf5AeIFdokii3BbKw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3ha0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtHw//dQD3bf5MAvHpKoe8xUZ+am6qiPc39KgXhEZvc4egHQL18x7a\r\nUS1rOJmCvhC6WxxxRPOWcG6re08Et6FQCGW+5k9uSewL1SAK4wSDVmdDZkNm\r\n/SkOA3hMf0ygN9nZU39dQ7d+QQ7pmsslV/QyBrJYv0NkZzfc/FXZCrH8K0Ff\r\nKx9AHP8gFmhlcmwjCkAw86JtF5otlo16+U7j2bahAl4974rd/C6dBImYRaMl\r\nQr+jNnjjMaIXKovx7oT5/3pR62Ec+bjm8T5Mj1G3jN1LTuXPSjYXtFyevj6W\r\nMr4gBbChkCte/a5AkBgl8zTS3//LtKiIKQxClKYeIj7qf2qc9sNPbtKpAQG7\r\nZgwoG9EsLnFk7TMWrsSjv+bQhHWG4ZGh6Bmt7AM5edbG9AKVTni1qXl2hyd8\r\nzb8byGgoBhzffA4XYW8UJ0Klc0k/mADiuQMj4U05MfbhtcTdwn0GqipA0SW7\r\nN6POJ5/+e40cX+D3RKzlH/+b0JuRgtIVADsceu2df+O0Ytj0oMVeKeERG6p6\r\npGP6rjz0p9+PTLsyj1TcfaokXoxjmnNdpTSqyk/CyUAMAQziWUhZKeBIMw0P\r\nYJDPCpBLQYJZ9NTtGgtB0YGskruhfg2Uz++E/gzJcsEywMhupUxvNhFbF4KZ\r\nIW8rpPpuS5pgC03B4AB197jnB9bnfk6hGHo=\r\n=kHEK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2302031721.0_1675499188666_0.26675388494993557"},"_hasShrinkwrap":false},"1.2302171719.0":{"name":"@bentoproject/youtube","version":"1.2302171719.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302171719.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"767b9ceecbb9759948c2b0db6f66c49097659f98","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2302171719.0","_nodeVersion":"18.14.0","_npmVersion":"9.3.1","dist":{"integrity":"sha512-iBe0Cy/eA7AtD1NMMJnrWQ5L7Z6ycx77/5a5P33XIBiBKlBB45GX5qu/C/3IKyqtofrr+MNAvqWp/dtbs3JsEg==","shasum":"ae29f9986b25295cb210557bbaf1e69fbddba98e","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2302171719.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChAaB63sjtT/DLUmWkL7foSiAhhDyoAwaSSdbcvDndbAIhAJPI11vaqolrrhfzOP2vXXmlMYJMeDJM6eR6ZWc9JXXc"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj8IuYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDFw/+JBIKAYAqEOAeO+faR+MHvUZcPU0GR2+LsOlmQ1OXBtvcVJFv\r\neFNVYUXHuW6Age4iuJ5PBp2wzCHVwJweBVaYH4GFzW35fDkzcFtI7jwaxkGk\r\n+WjNItUD1bSRzMSdxTJHB5/OhN2ZCh1rcZ4Yyp5GpW+kj9PHin+ZbaTwxz9Z\r\nwjeDC3CoQMjVthHqHdVbBU3AV/QwOjNcXYwpQZWg9QMweg3Gmyc50iVSIRTg\r\ns74b5eYPN7R2eJ6w8Fm+SlYRWoG4OnR1eeGo9r4f5L9/Q4RZHUrLqWbtkzoR\r\nG+PDpePVN33CvL8vbebmRqPkQaLYx3dasRBzGgo0/VXOI4jV7ED6Snn7OwDW\r\nkGD7gC4G1QEh4jwTvYjab+YkGm5znkovmH1zNz6UzyljWRz2j3sTVykSWcfW\r\nZsvhW3BWOLFo3c5b5L70d8a+VlV+E5DV3Y3mRmNrVP5zf0o7CMD7DtF9/XkX\r\nr9pOghyy5JX+9D4r3i4QcQW+A2pPpNdi4dMd0jP9ZTdZCLeXfgo4VM8bMvzQ\r\nleVUkZwj97qqs2PPWkiK6ivQFgjuC6WTmJT4wdCyTVh+HKk264EA8T+xsRGS\r\n3F9s7RCl1AgMcfiCgHSd2q1NjLFZBV2dGq2p09tE3/4om3gSi/wvVNs+npqR\r\n0WhhJSKG1y/moP57PM95ljLpLfjgbaKo9RE=\r\n=JD4O\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2302171719.0_1676708759880_0.4840131817687312"},"_hasShrinkwrap":false},"1.2302271541.0":{"name":"@bentoproject/youtube","version":"1.2302271541.0","description":"Embeds Youtube videos.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./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"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302271541.0"},"readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md","gitHead":"13cfe7f4354a82bebe08fd29496c4c7de848a18b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/youtube@1.2302271541.0","_nodeVersion":"18.14.1","_npmVersion":"9.3.1","dist":{"integrity":"sha512-WCjd3AY+gHeYChQmvtt2KHEzN2DUM8oNzSne9htVH0OKzsZ7oNhBJj523SUhGyOYoV3V9x6wtjOO45HCmTTf0Q==","shasum":"355e5136debac747f883f62939243f9eeebe095d","tarball":"https://registry.npmjs.org/@bentoproject/youtube/-/youtube-1.2302271541.0.tgz","fileCount":29,"unpackedSize":1577232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdXDXo8cFgQ6Ul4Tmi/ZGXaFWRIcXBM4kaYLOToCfhBQIgQZfgtHDLJZ6Y5aUU82stt2lxsJsOJkRS9S7RT91XiOE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/jlUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrQxAAnUDGMLNljecUUf4zLBCTHZXChzje1p239gij1FHjFZKkmEXo\r\n8csqn/Qw4MsDUjX1TG73p99BWVLUKsyRW+pmQZWaaUJarzrk+pHaHi39cSnK\r\nJ+IgNAn/vWpqCQ8zVDqEXfHgkI1vQLx12hfgFu/wywubj5xCMqbte3gskRuZ\r\nfqrnvtcliW+0tKv9mGE6RI/sYEJ3Lsg9h6lqL1cjzqtCOrJBpDPqSQpDHuaN\r\nSHcfM/N7PF/4n6+OXNJzvbghp18JQnMF0aE3pSYwYUpYJr7GmjianNAR2aM5\r\nvF6tirBVtaHM1GNm5TvnVFWt3Nkx7EZcLQRVypGwJTuIzxmkG0uTwUmBzYPc\r\nxqpkzEw58ed8ondGG86kUO4YGIfkNAREBeaCakgKSbmlKC3uM3D2CCAKi1f3\r\nZEETeaGsOqTJCQEqdW+0M/aZxS0xq5n243uKgM4Y9KVwZB0hS39orVMm0/Ms\r\ncNGYW67V9boIbhFC6XUYvvwSw9Hwo07RO2tTMO0pDEsBNmLkrWQtKV43vVXZ\r\nKvFEF8uyhLFI/QruyJOd3PR7WJn0sSTSAD+OY7TAI2dFoHnzRUoP4UVIN1v8\r\nyU5txi7/Knb9Y/TZEL6OHVvKToC7SyG30V2B6d4FyajzM4Nri2Hkh+2B8K8l\r\n7lAnd/CqToZGDEp0+s/+ll1ZP4KBHrFtnKc=\r\n=HwGW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.2302271541.0_1677605204293_0.9552713184714983"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-28T18:20:43.637Z","1.2110261518.0":"2021-10-28T18:20:43.912Z","modified":"2023-03-07T18:44:00.785Z","1.2110252343.0":"2021-10-28T21:50:43.010Z","1.2110281959.0":"2021-10-29T11:55:55.429Z","1.2110290545.0":"2021-10-30T11:24:54.278Z","1.2111011823.0":"2021-11-02T11:28:13.970Z","1.2110152252.3":"2021-11-02T22:07:00.960Z","1.2110212130.2":"2021-11-02T22:18:54.628Z","1.2111022043.0":"2021-11-03T11:24:52.829Z","1.2111180040.0":"2021-11-18T21:32:23.888Z","1.2111060251.3":"2021-11-18T21:46:00.654Z","1.2111182332.0":"2021-11-19T12:27:48.145Z","1.2111060251.9":"2021-11-19T16:34:23.969Z","1.2111191951.0":"2021-11-20T12:26:49.421Z","1.2111230244.0":"2021-11-23T12:28:17.309Z","1.2111230636.0":"2021-11-24T12:26:15.167Z","1.2111242025.0":"2021-11-25T12:45:42.681Z","1.2111292120.0":"2021-11-30T12:43:56.994Z","1.2111152338.2":"2021-11-30T17:57:41.746Z","1.2112010058.0":"2021-12-01T12:21:00.777Z","1.2112012300.0":"2021-12-02T12:33:26.620Z","1.2112021656.0":"2021-12-03T12:24:44.361Z","1.2112032204.0":"2021-12-04T12:22:56.005Z","1.2112062322.0":"2021-12-07T12:30:03.510Z","1.2112062322.2":"2021-12-07T22:31:45.166Z","1.2112080230.0":"2021-12-08T13:24:38.916Z","1.2112080230.1":"2021-12-08T16:00:10.892Z","1.2112082232.0":"2021-12-09T12:48:01.988Z","1.2111242025.1":"2021-12-10T00:14:05.870Z","1.2112091956.0":"2021-12-10T12:49:04.176Z","1.2112102136.0":"2021-12-11T12:34:01.645Z","1.2112132331.0":"2021-12-14T13:01:47.753Z","1.2112160003.0":"2021-12-16T12:22:12.715Z","1.2112162055.0":"2021-12-17T12:20:01.337Z","1.2112170012.0":"2021-12-18T12:20:28.713Z","1.2112201724.0":"2021-12-21T12:23:46.095Z","1.2112212349.0":"2021-12-22T12:25:51.523Z","1.2112221739.0":"2021-12-23T12:21:32.300Z","1.2112231523.0":"2021-12-24T12:23:08.803Z","1.2201042109.0":"2022-01-05T12:33:28.379Z","1.2201052144.0":"2022-01-06T12:43:49.137Z","1.2201061922.0":"2022-01-07T12:34:33.195Z","1.2201071715.0":"2022-01-08T12:24:36.106Z","1.2201101902.0":"2022-01-11T12:32:14.915Z","1.2112231523.1":"2022-01-11T19:27:49.527Z","1.2201120015.0":"2022-01-12T12:33:05.523Z","1.2112231523.2":"2022-01-12T22:42:33.786Z","1.2201122239.0":"2022-01-13T13:02:31.293Z","1.2201131702.0":"2022-01-14T13:06:25.466Z","1.2201141909.0":"2022-01-15T12:24:05.745Z","1.2201141909.1":"2022-01-25T19:52:34.476Z","1.2201141909.3":"2022-01-26T21:01:14.018Z","1.2201141909.4":"2022-02-01T21:40:33.154Z","1.2201212122.3":"2022-02-02T18:00:53.234Z","1.2202012258.0":"2022-02-02T19:15:42.682Z","1.2202022130.0":"2022-02-03T16:59:22.630Z","1.2202031816.0":"2022-02-04T15:49:19.045Z","1.2202042210.0":"2022-02-05T09:20:36.743Z","1.2202072236.0":"2022-02-08T09:22:40.664Z","1.2201262038.1":"2022-02-08T21:15:54.793Z","1.2202082004.0":"2022-02-09T22:19:46.188Z","1.2202092050.0":"2022-02-10T17:59:59.736Z","1.2202112230.0":"2022-02-14T21:08:57.144Z","1.2202142035.0":"2022-02-15T09:28:00.131Z","1.2202042210.1":"2022-02-15T18:25:45.068Z","1.2202152253.0":"2022-02-16T09:10:59.027Z","1.2202162256.0":"2022-02-17T09:32:41.726Z","1.2203041950.0":"2022-03-15T18:38:02.831Z","1.2203151539.0":"2022-03-16T08:24:10.007Z","1.2203172113.0":"2022-03-18T08:25:30.148Z","1.2203221937.0":"2022-03-23T08:27:19.257Z","1.2203231914.0":"2022-03-24T08:25:42.360Z","1.2203101844.0":"2022-03-24T20:11:50.344Z","1.2203281422.0":"2022-03-29T08:30:46.316Z","1.2204121632.0":"2022-04-12T18:18:00.709Z","1.2204122000.0":"2022-04-13T08:33:06.039Z","1.2204132005.0":"2022-04-14T08:35:11.781Z","1.2204142048.0":"2022-04-15T08:28:27.738Z","1.2204160405.0":"2022-04-16T08:26:23.228Z","1.2204182206.0":"2022-04-19T08:32:01.958Z","1.2204191429.0":"2022-04-20T08:33:42.288Z","1.2204211736.0":"2022-04-22T08:28:01.083Z","1.2204221712.0":"2022-04-23T08:27:18.127Z","1.2204252045.0":"2022-04-26T08:33:56.249Z","1.2204272205.0":"2022-04-28T08:33:28.202Z","1.2204281949.0":"2022-04-29T08:29:31.574Z","1.2204292129.0":"2022-04-30T08:27:37.065Z","1.2205031420.0":"2022-05-04T08:28:30.544Z","1.2205041533.0":"2022-05-05T08:27:51.138Z","1.2205051832.0":"2022-05-06T08:28:00.719Z","1.2205090810.0":"2022-05-10T08:34:01.029Z","1.2205101904.0":"2022-05-11T08:34:18.818Z","1.2205120110.0":"2022-05-12T08:33:03.732Z","1.2205161914.0":"2022-05-17T08:28:27.702Z","1.2205181800.0":"2022-05-19T08:28:44.059Z","1.2205191749.0":"2022-05-20T08:29:28.336Z","1.2205232225.0":"2022-05-24T08:28:16.940Z","1.2205120110.1":"2022-05-24T19:14:47.957Z","1.2205251942.0":"2022-05-26T08:28:19.965Z","1.2205270638.0":"2022-05-27T08:28:58.834Z","1.2206071918.0":"2022-06-07T22:30:13.796Z","1.2206072228.0":"2022-06-08T08:28:52.226Z","1.2206082301.0":"2022-06-09T08:32:29.719Z","1.2205270638.4":"2022-06-10T21:37:10.530Z","1.2206101637.0":"2022-06-11T08:28:36.156Z","1.2206131450.0":"2022-06-14T08:30:47.484Z","1.2206071918.1":"2022-06-14T21:28:57.123Z","1.2206162023.0":"2022-06-17T08:30:25.130Z","1.2206221455.0":"2022-06-23T08:28:59.425Z","1.2206291614.0":"2022-06-30T16:09:54.453Z","1.2207071723.0":"2022-07-08T08:35:35.330Z","1.2207181727.0":"2022-07-19T08:28:49.754Z","1.2207201724.0":"2022-07-21T08:28:52.188Z","1.2207221643.0":"2022-07-23T08:28:31.912Z","1.2207261725.0":"2022-07-27T08:28:57.564Z","1.2207281718.0":"2022-07-29T08:30:43.159Z","1.2208021808.0":"2022-08-03T08:29:14.414Z","1.2208042017.0":"2022-08-05T08:30:56.582Z","1.2208051912.0":"2022-08-06T08:30:04.776Z","1.2208081650.0":"2022-08-09T08:30:05.556Z","1.2208092047.0":"2022-08-10T08:30:06.733Z","1.2207281718.1":"2022-08-10T17:01:38.085Z","1.2207281718.2":"2022-08-10T18:18:37.220Z","1.2208112015.0":"2022-08-12T08:30:13.846Z","1.2208121708.0":"2022-08-13T08:28:44.061Z","1.2208051912.1":"2022-08-16T23:07:57.061Z","1.2208172101.0":"2022-08-24T20:57:31.985Z","1.2208242209.0":"2022-08-25T08:28:50.050Z","1.2209072154.0":"2022-09-08T08:26:47.927Z","1.2209131909.0":"2022-09-14T08:46:22.304Z","1.2208242209.1":"2022-09-15T16:44:58.160Z","1.2209142312.0":"2022-09-20T22:10:07.555Z","1.2210010655.0":"2022-10-04T16:51:54.086Z","1.2210041838.0":"2022-10-05T08:31:58.321Z","1.2210052034.0":"2022-10-06T08:27:26.514Z","1.2210071758.0":"2022-10-08T08:27:11.594Z","1.2210112333.0":"2022-10-12T08:26:36.503Z","1.2210142102.0":"2022-10-15T08:26:34.125Z","1.2210172057.0":"2022-10-18T08:29:46.078Z","1.2210191347.0":"2022-10-20T08:27:20.724Z","1.2210211855.0":"2022-10-22T08:25:28.723Z","1.2210251605.0":"2022-10-26T08:30:20.538Z","1.2210272257.0":"2022-10-28T08:29:04.786Z","1.2211042305.0":"2022-11-05T08:26:55.371Z","1.2211060024.0":"2022-11-08T08:28:05.459Z","1.2211111611.0":"2022-11-12T08:26:10.861Z","1.2211151402.0":"2022-11-16T18:48:23.670Z","1.2211182146.0":"2022-11-19T08:27:42.836Z","1.2211250451.0":"2022-11-25T08:26:37.987Z","1.2211302304.0":"2022-12-01T08:26:32.788Z","1.2212071834.0":"2022-12-07T19:40:43.122Z","1.2212092023.0":"2022-12-10T08:27:03.330Z","1.2211302304.1":"2022-12-13T21:54:56.110Z","1.2212151632.0":"2022-12-20T15:54:22.513Z","1.2212151632.1":"2022-12-20T20:11:47.075Z","1.2211302304.2":"2022-12-20T22:34:31.177Z","1.2212151632.2":"2023-01-03T18:13:50.757Z","1.2301031703.0":"2023-01-03T20:32:26.134Z","1.2301032153.0":"2023-01-04T08:27:26.961Z","1.2301041800.0":"2023-01-05T08:27:48.559Z","1.2301100345.0":"2023-01-10T08:27:59.488Z","1.2301112346.0":"2023-01-12T08:29:31.443Z","1.2301181928.0":"2023-01-19T08:28:19.241Z","1.2301261900.0":"2023-01-27T08:28:57.965Z","1.2301301810.0":"2023-01-31T08:28:02.601Z","1.2302012254.0":"2023-02-02T08:27:23.509Z","1.2302021743.0":"2023-02-03T08:28:44.270Z","1.2302031721.0":"2023-02-04T08:26:28.861Z","1.2302171719.0":"2023-02-18T08:26:00.128Z","1.2302271541.0":"2023-02-28T17:26:44.484Z"},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"description":"Embeds Youtube videos.","homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-youtube/1.0","repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-youtube/1.0"},"author":{"name":"Bento Authors"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"license":"Apache-2.0","readme":"# Bento Youtube\n\nEmbeds [Youtube](https://youtube.com) videos.\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\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport {defineElement as defineBentoYoutube} from '@bentoproject/youtube';\ndefineBentoYoutube();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube data-videoid=\"dQw4w9WgXcQ\"></bento-youtube>\n  </body>\n</html>\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<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-youtube {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-youtube` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-youtube {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### autoplay\n\nIf this attribute is present, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this attribute is present, the video or playlist will play again (from the beginning) once it ends.\n\n#### data-videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### data-live-channelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `data-live-channelid` instead of a `data-videoid` attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### data-param-\\*\n\nAll `data-param-*` attributes (with the exception of `data-param-autoplay` and `data-param-loop`) will be added as query parameter to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys will be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n#### Interactivity and API usage\n\nThe `bento-youtube` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-youtube');\nconst api = await video.getApi();\n```\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-youtube-1.0.css\"\n    />\n    <style>\n      bento-youtube {\n        width: 320px;\n        height: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-youtube id=\"my-video\" data-videoid=\"dQw4w9WgXcQ\">\n    </bento-youtube>\n    <p>\n      <button id=\"play\">Play</button>\n      <button id=\"pause\">Pause</button>\n      <button id=\"mute\">Mute</button>\n      <button id=\"unmute\">Unmute</button>\n    </p>\n    <script>\n      (async () => {\n        await customElements.whenDefined('youtube');\n\n        const video = document.querySelector('#my-video');\n        const api = await video.getApi();\n\n        document.querySelector('#play').onclick = () => {\n          api.play();\n        };\n        document.querySelector('#pause').onclick = () => {\n          api.pause();\n        };\n        document.querySelector('#mute').onclick = () => {\n          api.mute();\n        };\n        document.querySelector('#unmute').onclick = () => {\n          api.unmute();\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\nThe `bento-youtube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\napi.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\napi.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\napi.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\napi.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\napi.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(api.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(api.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(api.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(api.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(api.loop);\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/youtube\n```\n\n```javascript\nimport React from 'react';\nimport {BentoYoutube} from '@bentoproject/youtube/react';\nimport '@bentoproject/youtube/styles.css';\n\nfunction App() {\n  return <BentoYoutube videoid=\"dQw4w9WgXcQ\" />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoYoutube` 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 (slides) 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<BentoYoutube\n  style={{width: 320, height: 180}}\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\nOr via `className`:\n\n```jsx\n<BentoYoutube\n  className=\"custom-styles\"\n  videoid=\"dQw4w9WgXcQ\"\n/>\n```\n\n```css\n.custom-styles {\n  height: 320px;\n  width: 180px;\n}\n```\n\nYou may use `aspect-ratio` to size it responsively:\n\n```css\n.custom-styles {\n  aspect-ratio: 16/9;\n}\n```\n\n### Props\n\n#### autoplay\n\nIf this prop is true, and the browser supports autoplay:\n\n<ul>\n  <li>\n    the video is automatically muted before autoplay starts\n  </li>\n  <li>\n    when the video is scrolled out of view, the video is paused\n  </li>\n  <li>\n    when the video is scrolled into view, the video resumes playback\n  </li>\n  <li>\n    when the user taps the video, the video is unmuted\n  </li>\n  <li>\n    if the user has interacted with the video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it. For example, if the user pauses the video, then scrolls the video out of view and returns to the video, the video is still paused.\n  </li>\n</ul>\n\n#### loop\n\nIf this prop is true, the video or playlist will play again (from the beginning) once it ends.\n\n#### videoid\n\nThe YouTube video id found in every YouTube video page URL.\n\nFor example, in this URL: `https://www.youtube.com/watch?v=Z1q71gFeRqM`, `Z1q71gFeRqM` is the video id.\n\n#### liveChannelid\n\nThe Youtube channel id that provides a stable livestream url. For example, in this URL: `https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q`, `UCB8Kb4pxYzsDsHxzBfnid4Q` is the channel id. You can provide a `liveChannelid` prop instead of a `videoid` prop to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above.\n\n#### params\n\nAll fields in this object (with the exception of <code>autoplay</code> and <code>loop</code>) will be added as query parameters to the YouTube iframe src. This may be used to pass custom values through to YouTube plugins, such as whether to show controls.\n\nKeys and values will be URI encoded. Keys must be camel cased.\n\nSee [YouTube Embedded Player Parameters](https://developers.google.com/youtube/player_parameters) for more parameter options for YouTube.\n\n#### credentials (optional)\n\nDefines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/) (`omit` or `include`).\n\nIf you want to use the [YouTube player in privacy-enhanced mode](http://www.google.com/support/youtube/bin/answer.py?answer=141046), pass the value of `omit`.\n\nUsually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.\n\n#### title (optional)\n\nDefines a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"YouTube video\"`.\n\n### Interactivity and API usage\n\nThe `BentoYoutube` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoYoutube ref={ref} />\n  );\n}\n```\n\n#### Actions\n\nThe `BentoYoutube` API allows you to perform the following actions:\n\n##### `play()`\n\nPlays the video.\n\n```js\nref.current.play();\n```\n\n##### `pause()`\n\nPauses the video.\n\n```js\nref.current.pause();\n```\n\n##### `mute()`\n\nMutes the video.\n\n```js\nref.current.mute();\n```\n\n##### `unmute()`\n\nUnmutes the video.\n\n```js\nref.current.unmute();\n```\n\n##### `requestFullscreen()`\n\nExpands the video to fullscreen when possible.\n\n```js\nref.current.requestFullscreen();\n```\n\n#### Properties\n\nIt also exposes the following read-only properties:\n\n##### `currentTime` (`number`)\n\nThe current playback time in seconds.\n\n```js\nconsole.log(ref.current.currentTime);\n```\n\n##### `duration` (`number`)\n\nThe video's duration in seconds, when it's known (e.g. is not a livestream).\n\n```js\nconsole.log(ref.current.duration);\n```\n\n##### `autoplay` (`boolean`)\n\nWhether the video autoplays.\n\n```js\nconsole.log(ref.current.autoplay);\n```\n\n##### `controls` (`boolean`)\n\nWhether the video shows controls.\n\n```js\nconsole.log(ref.current.controls);\n```\n\n##### `loop` (`boolean`)\n\nWhether the video loops.\n\n```js\nconsole.log(ref.current.loop);\n```\n","readmeFilename":"README.md"}